본문 바로가기
개발/spring, spring boot

[Spring Boot] JPA와 Thymeleaf를 이용한 간단한 게시판 개발 예제

by 가시죠 2021. 8. 28.
반응형

아래 포스팅 글에서 만든 예제를 그대로 사용하면서 view 화면만 Thymeleaf로 변경한다.

jsp -> html (Thymeleaf)

2021.08.14 - [개발/spring, spring boot] - [Spring Boot] JPA와 JSP를 이용한 간단한 게시판 개발 예제

 

기존 프로젝트에서 view를 변경해도 되지만 신규 프로젝트를 생성하여 기존 소스 java 부분을 복사하여 html만 신규로 작성한다.

 

프로젝트 생성 시 선택 한 Dependencies

Thymeleaf만 추가되었다.

 

기존 jsp에서는 WEB-INF에서 아래 jsp 폴더를 만들어 사용했지만 Thymeleaf에서는 아래 경로대로 파일을 생성해야 한다.

 

Thymeleaf 웹 리소스 경로

파일 경로
정적 HTML 파일 src/main/resources/static
src/main/public
웹페이지 파비콘 src/main/resources/favicon.ico
템플릿 src/main/resources/templates

 

application.properties

# Database 기본 세팅
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.url=jdbc:h2:tcp://localhost/~/test
spring.datasource.username=sa
spring.datasource.password=

# JPA 하이버네이트 로그 레벨 설정
logging.level.org.hibernate=info
logging.level.org.springframework=info

#JPA 세팅
spring.jpa.hibernate.ddl-auto=update
spring.jpa.generate-ddl=false
spring.jpa.show-sql=true
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.jpa.properties.hibernate.format_sql=true

# Thymeleaf Cache Setting
spring.thymeleaf.cache=false

 

getBoard.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>글상세</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #444444;
            border-collapse: collapse;
        }
        table th {
            border: 1px solid #444444;
            text-align: center;
            height: 40px;
            background-color: dodgerblue;
            color: cornsilk;
        }
        table td {
            border: 1px solid #444444;
            text-align: left;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <h3>글쓰기</h3>
    <hr>
    <form th:action="@{updateBoard}" method="post">
        <input type="hidden" name="seq" th:value="${board.seq}"/>
        <table style="width: 700px; margin: auto">
            <tr>
                <td width="70" style="background-color: dodgerblue; color: cornsilk">제목</td>
                <td><input type="text" name="title" th:value="${board.title}"/></td>
            </tr>
            <tr>
                <td style="background-color: dodgerblue; color: cornsilk">작성자</td>
                <td th:text="${board.writer}"></td>
            </tr>
            <tr>
                <td style="background-color: dodgerblue; color: cornsilk">내용</td>
                <td><textarea name="content" cols="40" rows="10" th:text="${board.content}"></textarea></td>
            </tr>
            <tr>
                <td style="background-color: dodgerblue; color: cornsilk">등록일</td>
                <td th:text="${#dates.format(board.createDate, 'yyyy-MM-dd')}"></td>
            </tr>
            <tr>
                <td style="background-color: dodgerblue; color: cornsilk">조회수</td>
                <td th:text="${board.cnt}"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div style="text-align: center;">
                        <input type="submit" value="수정"/>
                    </div>
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <a th:href="@{/insertBoardView}">글등록</a>
    <a th:href="@{/deleteBoard(seq=${board.seq})}">글삭제</a>
    <a th:href="@{/getBoardList}">글목록</a>
</div>
</body>
</html>

 

getBoardList.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>게시판 목록</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #444444;
            border-collapse: collapse;
        }
        table th {
            border: 1px solid #444444;
            text-align: center;
            height: 40px;
            background-color: dodgerblue;
            color: cornsilk;
        }
        table td {
            border: 1px solid #444444;
            text-align: center;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <h1>게시판 목록</h1>
    <table style="width: 700px; margin: auto">
        <tr>
            <th style="width: 10%">번호</th>
            <th style="width: 50%">제목</th>
            <th style="width: 15%">작성자</th>
            <th style="width: 15%">등록일</th>
            <th style="width: 10%">조회수</th>
        </tr>
        <tr th:each="board : ${boardList}">
            <td th:text="${board.seq}"></td>
            <td><a th:href="@{/getBoard(seq=${board.seq})}" th:text="${board.title}"></a> </td>
            <td th:text="${board.writer}"></td>
            <td th:text="${#dates.format(board.createDate, 'yyyy-MM-dd')}"></td>
            <td th:text="${board.cnt}"></td>
        </tr>
    </table>
    <a href="insertBoardView">새글 등록</a>
</div>
</body>
</html>

 

insertBoard.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>글쓰기</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #444444;
            border-collapse: collapse;
        }
        table th {
            border: 1px solid #444444;
            text-align: center;
            height: 40px;
            background-color: dodgerblue;
            color: cornsilk;
        }
        table td {
            border: 1px solid #444444;
            text-align: left;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
<h3>글쓰기</h3>
<hr>
<form action="insertBoard" method="post">
    <table style="width: 700px; margin: auto">
        <tr>
            <td width="70" style="background-color: dodgerblue; color: cornsilk">제목</td>
            <td><input type="text" name="title"/></td>
        </tr>
        <tr>
            <td style="background-color: dodgerblue; color: cornsilk">작성자</td>
            <td><input type="text" name="writer"/></td>
        </tr>
        <tr>
            <td style="background-color: dodgerblue; color: cornsilk">내용</td>
            <td><textarea name="content" cols="40" rows="10"></textarea></td>
        </tr>
        <tr>
            <td colspan="2">
                <div style="text-align: center;">
                    <input type="submit" value="등록"/>
                </div>
            </td>
        </tr>
    </table>
</form>
<a th:href="@{/getBoardList}">글목록</a>
</div>
</body>
</html>

 

testBoardList.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>게시판 목록</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #444444;
            border-collapse: collapse;
        }
        table th {
            border: 1px solid #444444;
            text-align: center;
            height: 40px;
            background-color: dodgerblue;
            color: cornsilk;
        }
        table td {
            border: 1px solid #444444;
            text-align: center;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <h1>게시판 목록</h1>
    <table style="width: 700px; margin: auto">
        <tr>
            <th style="width: 10%">번호</th>
            <th style="width: 50%">제목</th>
            <th style="width: 15%">작성자</th>
            <th style="width: 15%">등록일</th>
            <th style="width: 10%">조회수</th>
        </tr>
        <tr th:each="board : ${boardList}">
            <td th:text="${board.seq}"></td>
            <td th:text="${board.title}"></td>
            <td th:text="${board.writer}"></td>
            <td th:text="${board.createDate}"></td>
            <td th:text="${board.cnt}"></td>
        </tr>
    </table>
    <a href="insertBoard">새글 등록</a>
</div>
</body>
</html>

 

 

 

 

 

반응형
저작자표시

'개발 > spring, spring boot' 카테고리의 다른 글

[spring boot] 예외처리  (0) 2021.10.17
[Spring Boot] JPA와 JSP를 이용한 간단한 게시판 개발 예제  (0) 2021.08.14
[Spring Boot] 독립적으로 실행 가능한 JAR 배포  (0) 2021.08.01
[Spring Boot] 로깅  (0) 2021.07.12
[String Boot] 스프링부트를 구성하는 핵심 요소 3가지  (0) 2021.07.10

관련글

댓글

티스토리툴바