스프링 부트로 간단한 게시판 만들기 (타임리프 기본 기능, Thymeleaf)

스프링 부트로 간단한 게시판 만들기 (타임리프 기본 기능, Thymeleaf)

2022. 1. 19. 08:40ㆍSpring/[2022] Spring boot

728x90

게시판은 지금까지 많이 만들었었는데 스프링 부트를 활용해서 게시판을 만드는 것도 한번 해보자 해서

또 만들어 본다!

1️⃣ 테이블 생성

테이블을 예전부터 계속 사용해오던 테이블을 이용해줄 예정이다.

2️⃣ 완성 화면

기본 화면은 이렇게 구성되어 있다.

이번에는 정말 간단하게 CRUD만 작성할 예정이고

이제 검증, 로그인 등을 구현해서 점점 발전 시킬 예정이다.

(이번엔 진짜..!!!)

몇번이나 공부하면서 게시판은 만들어왔는데 다른 점이라면 타임리프를 활용해 JSP는 전혀 사용하지 않는다는 점이다!

사용해본 결과 HTML에 다른 코드 등이 섞이지 않는다는 점이 좋고 타임리프랑 스프링의 연동성이 좋아서 활용하기 굉장히 좋았다.

3️⃣ Board.class

이번에는 롬복도 활용해서 좀 더 코드를 간결하게 해줬다.

너무 옛날 자료를 기반으로 공부하다 보니까 이걸 잘 몰랐다,,, 롬복,,

@Data

: @Getter, @Setter, @ToString, @EqualsAndHashCode와 @RequiredArgsConstructor를 합쳐놓은 것이다.

그런데 보통 생성자는 보안상?이라고 했나 따로 만들어주는게 더 좋다고해서 생성자는 따로 만들어줬다.

4️⃣ 목록 조회

BoardController.class

요청 URL "/boards"로 HTTP 요청 메서드가 GET이면 boards 핸들러가 수행된다.

@RequiredArgsConstructor

: 이 어노테이션은 초기화되지 않은 final 필드나 , @NonNull이 붙은 필드에 대한 생성자를 생성해주는데 주로 의존성 주입에 대한 편의성을 위해 사용한다.

BoardService.class

BoardRepository.class

JdbcTemplateBoardRepository.class

이번에는 jdbcTemplate를 사용했는데 다음엔 myBatis, JPA를 사용해볼 예정이다!

Boards.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
          href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container" style="max-width: 1000px">
    <div class="py-5 text-center">
        <h2 th:text="#{page.boards}">글 목록</h2>
    </div>

    <div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    onclick="location.href='addForm.html'"
                    th:onclick="|location.href='@{/boards/add}'|"
                    type="button" th:text="#{page.addBoard}">글 등록</button>
        </div>
    </div>

    <hr class="my-4">
    <div>
        <table class="table">
            <thead>
            <tr>
                <th th:text="#{label.board.id}">ID</th>
                <th th:text="#{label.board.subject}">제목</th>
                <th th:text="#{label.board.name}">작성자</th>
                <th th:text="#{label.board.viewcnt}">조회수</th>
                <th th:text="#{label.board.regdate}">등록일</th>

            </tr>
            </thead>
            <tbody>
            <tr th:each="board : ${boards}">
                <td><a href="item.html" th:href="@{/boards/{uid}(uid=${board.uid})}" th:text="${board.uid}">글 ID</a></td>
                <td><a href="item.html" th:href="@{/boards/{uid}(uid=${board.uid})}" th:text="${board.subject}">제목</a></td>
                <td th:text="${board.name}">작성자</td>
                <td th:text="${board.viewcnt}">조회수</td>
                <td th:text="${board.regdate}">등록일</td>
            </tr>
            </tbody>
        </table>
    </div>

</div> <!-- /container -->

</body>
</html>

타임 리프 기본 기능

th:text

-> HTML 콘텐츠에 데이터를 출력할 때

th:text="${...}"

-> ${...} 변수 표현식

th:href="@{...}"

-> @{...} URL 링크

th:each

-> 반복

th:if, unless

-> 조건 (이때 타임 리프는 해당 조건이 맞지 않으면 아예 태그 자체를 렌더링하지 않는다!)

th:object

-> 커멘드 객체를 지정한다.

*{...}

-> 선택 변수 식으로 th:object에서 선택한 객체에 접근한다.

th:field

-> HTML 태그의 id, value, name 등 속성을 자동으로 처리해준다.(많은 기능 수행함) ⭐⭐

ex) th:field="*{itemName}" = ${item.itemName}

5️⃣ 게시글 조회

BoardController.class

게시글 조회할 때는 우선 조회수도 증가해야하고, 글 목록도 조회되어야 한다.

이때는 /boards/{uid}로 해당 게시글의 uid 로 조회한다.

BoardService.class

BoardRepository.class

JdbcTemplateBoardRepository.class

jdbcTemplate query()

: SELECT 쿼리 실행을 위한 메서드

jdbcTemplate update()

: INSERT, UPDATE, DELETE 쿼리는 update() 메서드를 실행한다.

Board.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
          href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="py-5 text-center">
        <h2 th:text="#{page.board}">상품 상세</h2>
    </div>

    <!-- 추가 -->
    <h2 th:if="${param.status}" th:text="'저장 완료'"></h2>

    <div>
        <label for="boardId" th:text="#{label.board.id}">ID</label>
        <input type="text" id="boardId" name="boardId" class="form-control" value="1" th:value="${board.uid}" readonly>
    </div>
    <div>
        <label for="boardSubject" th:text="#{label.board.subject}">제목</label>
        <input type="text" id="boardSubject" name="boardSubject" class="form-control" value="상품A" th:value="${board.subject}" readonly>
    </div>
    <div>
        <label for="name" th:text="#{label.board.name}">작성자</label>
        <input type="text" id="name" name="name" class="form-control" value="작성자" th:value="${board.name}" readonly>
    </div>
    <div>
        <label for="viewcnt" th:text="#{label.board.viewcnt}">조회수</label>
        <input type="text" id="viewcnt" name="viewcnt" class="form-control" value="10" th:value="${board.viewcnt}" readonly>
    </div>

    <div>
        <label for="regdate" th:text="#{label.board.regdate}">등록일</label>
        <input type="text" id="regdate" name="regdate" class="form-control" value="10" th:value="${board.regdate}" readonly>
    </div>

    <div>
        <label for="contents" th:text="#{label.board.contents}">글 내용</label>
        <input type="text" id="contents" name="contents" class="form-control" value="10" th:value="${board.contents}" readonly>
    </div>

    <hr class="my-4">

    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg"
                    onclick="location.href='editForm.html'"
                    th:onclick="|location.href='@{/boards/{uid}/edit(uid=${board.uid})}'|"
                    type="button" th:text="#{page.updateBoard}">상품 수정</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'"
                    th:onclick="|location.href='@{/boards}'|"
                    type="button" th:text="#{button.list}">목록으로</button>
        </div>

        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'"
                    th:onclick="|location.href='@{/boards/{uid}/delete(uid=${board.uid})}'|"
                    type="button" th:text="#{button.delete}">삭제</button>
        </div>
    </div>

</div> <!-- /container -->
</body>
</html>

6️⃣ 게시글 등록

BoardController.class

먼저 @Getmapping("/add")에서는 등록 폼을 보여주고, 등록 버튼을 누르면 @Postmaping으로 같은 url로 해당 글을 등록해준다.

그리고 상품 등록후에는 redirect해서 목록 조회하면으로 이동한다.

BoardService.class

BoardRepository.class

JdbcTemplateBoardRepository.class

addForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
          href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
        .field-error {
            border-color: #dc3545;
            color: #dc3545;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="py-5 text-center">
        <h2 th:text="#{page.addBoard}">상품 등록</h2>
    </div>

    <form action="item.html" th:action th:object="${board}" method="post">

        <div>
            <input type="hidden" id="name" class="form-control"  th:field="*{name}" value="testUser" placeholder="제목을 입력하세요.">

        </div>

        <div>
            <label for="subject" th:text="#{label.board.subject}">제목</label>
            <input type="text" id="subject" th:field="*{subject}" class="form-control" placeholder="제목을 입력하세요.">

        </div>
        <div>
            <label for="contents" th:text="#{label.board.contents}">내용</label>
            <textarea cols="150" rows="10" id="contents" th:field="*{contents}" class="form-control" placeholder="내용을 입력하세요.">

            </textarea>

        </div>

        <hr class="my-4">

        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit" th:text="#{button.save}">저장</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'"
                        th:onclick="|location.href='@{/boards}'|"
                        type="button" th:text="#{button.cancel}">취소</button>
            </div>
        </div>

    </form>

</div> <!-- /container -->
</body>
</html>

7️⃣ 게시글 삭제

BoardController.class

여기서는 따로 화면 구현 없이 게시글 조회 화면에서 삭제버튼을 누르면 삭제가 되면서 목록으로 리다이렉트한다.

BoardService.class

BoardRepository.class

JdbcTemplateBoardRepository.class

8️⃣ 게시글 수정

BoardController.class

@GetMapping("/{uid}/edit") 을 통해 해당 uid의 글을 가져오고, 수정할 수 있는 페이지로 이동한다.

그리고 수정 페이지에서 수정 버튼을 누르면 @PostMapping("/{uid}/edit")으로 해당 핸들러가 동작하고 페이지의 제목과 내용이 수정된다.

BoardService.class

BoardRepository.class

JdbcTemplateBoardRepository.class

수정한 다음에는 게시글 조회 페이지로 이동해서 수정한 내용을 확인할 수 있다.

728x90

'Spring > [2022] Spring boot' 카테고리의 다른 글

[스프링부트] jar 파일로 배포하기 (0)	2022.03.06
Spring boot, IntelliJ에서 롬복Lombok 설치하기 (0)	2021.12.13
[Spring boot #4] 스프링 API @ResponseBody (0)	2021.12.07
[Spring boot #3] 스프링 프로젝트 명령프롬프트(cmd)에서 빌드하고 실행해보기 (0)	2021.12.07
[Spring boot #2] 스프링 부트 스타터 사이트에서 스프링 프로젝트 생성하기 (0)	2021.12.07

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'Spring > [2022] Spring boot' 카테고리의 다른 글

관련글

티스토리툴바