Published 2022. 8. 1. 16:11

[Spring Jpa] 2. 게시판 만들기 - bootstrap5 적용하기 (InteliJ+Spring Data Jpa+QueryDsl+H2+타임리프+BootStrap5+Gradle)

이전글 보기

https://aamoos.tistory.com/668

[Spring Jpa] 1. 게시판 만들기 - 프로젝트 설정

개발환경 - InteliJ - Java11 - Jpa - H2 Database - Thymeleaf - BootStrap5 프로젝트 설정 1. https://start.spring.io/ 해당사이트에 접속합니다. 2. project 설정방법 - Project는 Gradle Project를 선택합니..

aamoos.tistory.com

목표

- 이번장에서는 부트스트랩을 적용해보고, 그에 따라 저번장에서 설정한 타임리프 레이아웃 파일들을 변경해보는것이 목표입니다.

bootstrap css, js 다운 받기

https://getbootstrap.com/

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

- 해당 사이트에서 css, js를 다운로드 받습니다.

- download 버튼 클릭

- Download source 버튼 클릭

- 받은 폴더의 dist안에 css js를 복사합니다.

프로젝트에 css, js 설정하기

- static 경로밑에 붙여넣기 합니다.

- 저번장에 만든 styles.html에 아래코드를 한줄 추가합니다.


<link rel="stylesheet" href="/css/bootstrap.min.css">

- script.html은 아직 사용하는 공통 js가 없어서 빈태그만 추가합니다.


<script></script>

- templates 밑에 board 디렉터리를 만들고 list.html, update.html, write.html을 생성합니다.

게시판 리스트, 등록, 수정 html

list.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="layout/default_layout">
    <div layout:fragment="content" class="content">
    <nav class="container">
        <br>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="제목을 입력해주세요.">
                <button type="submit" class="btn btn-secondary">검색</button>
            </div>
        <br>
        <form>
            <table class="table table-hover">
                <colgroup>
                    <col width="2%" />
                    <col width="5%" />
                    <col width="20%" />
                    <col width="5%" />
                    <col width="5%" />
                    <col width="5%" />
                    <col width="5%" />
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            <label class="checkbox-inline">
                            <input type="checkbox" id="allCheckBox" class="chk">
                            </label>
                        </th>
                        <th>번호</th>
                        <th>제목</th>
                        <th>작성자</th>
                        <th>날짜</th>
                        <th>조회수</th>
                        <th>파일유무</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>
                            <label class="checkbox-inline">
                                <input type="checkbox" class="chk" name="chk" value="">
                            </label>
                        <td>1</td>
                        <td><a href=""></a>제목입니다.</td>
                        <td>작성자</td>
                        <td>2022.08.01</td>
                        <td>1</td>
                        <td>이미지</td>
                    </tr>
                </tbody>
            </table>
            <br>
            <!-- ADMIN 권한일경우에만 글쓰기 권한있음 -->
            <div class="d-flex justify-content-end">
                <a class="btn btn-danger">글삭제</a>
                <a href="/write" class="btn btn-primary">글쓰기</a>
            </div>
            <br>
            <nav class="container d-flex align-items-center justify-content-center" aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </form>
    </nav>
  </div>
</html>

게시판 리스트에 해당되는 html파일입니다.

update.html


<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default_layout}">

<div layout:fragment="content" class="content">
  <article>
    <div class="container" role="main">
      <div class="mb-3">
        <label for="boardTitle">제목</label>
        <input type="text" class="form-control" id="boardTitle" name="boardTitle" placeholder="제목을 입력해 주세요">
      </div>
      <br>
      <div class="mb-3">
        <label for="reg_id">작성자</label>
        <input type="text" class="form-control" id="reg_id" name="regId"  value="" readonly>
      </div>
      <br>
      <div class="mb-3">
        <label for="boardContent">내용</label>
        <textarea class="form-control" rows="5" id="boardContent" name="boardContent" placeholder="내용을 입력해 주세요"></textarea>
      </div>
      <br>
      <br>
      <div>
        <button onclick="registerAction()" type="button" class="btn btn-sm btn-primary" id="btnSave">수정</button>
        <button onclick="location.href='/'" type="button" class="btn btn-sm btn-primary" id="btnList">목록</button>
      </div>
    </div>
  </article>
</div>
</html>

게시판 수정화면에 해당하는 html 파일입니다.

write.html


<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default_layout}">

<div layout:fragment="content" class="content">
    <article>
        <div class="container" role="main">
            <div class="mb-3">
                <label for="boardTitle">제목</label>
                <input type="text" class="form-control" id="boardTitle" name="boardTitle" placeholder="제목을 입력해 주세요">
            </div>
            <br>
            <div class="mb-3">
                <label for="reg_id">작성자</label>
                <input type="text" class="form-control" id="reg_id" name="regId"  value="" readonly>
            </div>
            <br>
            <div class="mb-3">
                <label for="boardContent">내용</label>
                <textarea class="form-control" rows="5" id="boardContent" name="boardContent" placeholder="내용을 입력해 주세요"></textarea>
            </div>
            <br>
            <br>
            <div>
                <button onclick="registerAction()" type="button" class="btn btn-sm btn-primary" id="btnSave">저장</button>
                <button onclick="location.href='/'" type="button" class="btn btn-sm btn-primary" id="btnList">목록</button>
            </div>
        </div>
    </article>
</div>
</html>

- 게시판 글쓰기 화면에 해당하는 html 파일입니다.

layout 파일 수정

- list.html, write.html, update.html을 생성함에 따라 태그 배치가 바껴서 layout 위치를 수정을 해야합니다.

config.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:fragment="configFragment">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>

        <!-- 공통 css -->
        <th:block th:replace="common/styles"></th:block>

        <!-- 컨텐츠 페이지의 css -->
        <th:block layout:fragment="css"></th:block>

        <!-- 공통 js -->
        <th:block th:replace="common/scripts"></th:block>

        <!-- 컨텐츠 페이지의 js -->
        <th:block layout:fragment="script"></th:block>
    </head>
</th:block>
</html>

- default_layout.html 파일의 configFragment로 선언된 영역에 해당 코드를 끼웁니다.

- head안에 선언될 js나 css meta태그를 선언한 파일입니다.

footer.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<div th:fragment="footerFragment" class="container">
    <footer class="py-1">
        <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
            <p>© 2022 Company, Inc. All rights reserved.</p>
            <ul class="list-unstyled d-flex">
                <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"></use></svg></a></li>
                <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"></use></svg></a></li>
                <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"></use></svg></a></li>
            </ul>
        </div>
    </footer>
</div>

</html>

- default_layout.html 파일의 footerFragment로 선언된 영역에 해당 코드를 끼웁니다. 해당 코드는 footer 영역 파일입니다.

header.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<nav th:fragment="headerFragment" class="py-2 bg-light border-bottom">
    <div class="container d-flex flex-wrap">
        <ul class="nav me-auto">
            <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">home</a></li>
            <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
            <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
            <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
            <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
        </ul>
        <ul class="nav">
            <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
            <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
        </ul>
    </div>
</nav>

<div th:fragment="headerFragment" class="container py-4">
    <header class="pb-3 mb-4 border-bottom">
        <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
            <span class="fs-4">게시판 예제</span>
        </a>
    </header>
</div>

- default_layout.html 파일의 headerFragment로 선언된 영역에 해당 코드를 끼웁니다. 해당 코드는 header 영역 파일입니다.

default_layout.html


<!DOCTYPE html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- config -->
<th:block th:replace="fragment/config :: configFragment"></th:block>
<!-- header -->
<body>
<th:block th:replace="fragment/header :: headerFragment"></th:block>
<div class="container py-3">
    <div>
        <!-- content -->
        <th:block layout:fragment="content"></th:block>
    </div>

</div>

<!-- footer -->
<th:block th:replace="fragment/footer :: footerFragment"></th:block>
</body>
</html>

- default_layout.html을 decorate 하면 해당 템플릿을 사용할수 있습니다.

결과 화면

리스트

등록/수정화면

- 다음장에는 h2 데이터베이스를 연결하는 부분을 해보겠습니다.

다음글 보기

https://aamoos.tistory.com/670

[Spring Jpa] 3. 게시판 만들기 - H2 Database 연결하기

이전글 보기 https://aamoos.tistory.com/669 [Spring Jpa] 2. 게시판 만들기 - bootstrap5 적용하기 이전글 보기 https://aamoos.tistory.com/668?category=856312 [Spring Jpa] 1. 게시판 만들기 - 프로젝트 설..