article thumbnail image
Published 2022. 9. 7. 21:08

Bootstrap - table, button

Bootstrap

application.properties

# MySQL 설정
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# DB Source URL 설정
# 예시) spring.datasource.url=jdbc:mysql://localhost:3306/test_db?useSSL=false&useUnicode=true&serverTimezone=Asia/Seoul
spring.datasource.url=jdbc:mysql://localhost:3301/mydb?useSSL=false&useUnicode=true&serverTimezone=Asia/Seoul


# DB 사용자 이름 설정
# 예시) spring.datasource.username=root
spring.datasource.username=root

# DB 사용자이름에 대한 암호 설정
# 예시) spring.datasource.password=root
spring.datasource.password=

# true 설정 시, JPA 쿼리문 확인 가능
spring.jpa.show-sql=true

## DDL(create, alter, drop) 정의 시, DB의 고유 기능을 사용할 수 있음.
#spring.jpa.hibernate.ddl-auto=update

# JPA의 구현체인 Hibernate가 동작하면서, 발생한 SQL의 가독성을 높여줌.
spring.jpa.properties.hibernate.format_sql=true

 

 

DB는 MySQL을 사용했다.

board 테이블을 생성해 id, title, content Column을 생성했다.,

 

 

 

 

 

 

 

common.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${title}">Hello Spring Boot!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link href="starter-template.css" th:href="@{/starter-template.css}" rel="stylesheet">
</head>

<body class="d-flex flex-column h-100">

<header th:fragment="menu(menu)">
    <!-- Fixed navbar -->
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Spring Boot Tutorial</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${menu} == 'home'? 'active'" aria-current="page" href="#" th:href="@{/}">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${menu} == 'board'? 'active'" href="#" th:href="@{/board/list}">게시판</a>
                    </li>
                </ul>

            </div>
        </div>
    </nav>
</header>





<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

<head>와 <header> 을 thymeleaf 의 fragment 를 이용했다. 

 

 <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${menu} == 'home'? 'active'" aria-current="page" href="#" th:href="@{/}">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${menu} == 'board'? 'active'" href="#" th:href="@{/board/list}">게시판</a>
                    </li>
                </ul>

            </div>

${menu} == "home" 이면 class="nav-link" 에 active를 붙여 준다.

 

 

 

header 부분은 bootstrap의 Examples tamplate을 사용했다.

https://getbootstrap.com/docs/5.2/examples/sticky-footer-navbar/

 

Sticky Footer Navbar Template · Bootstrap v5.2

Sticky footer with fixed navbar Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container. Back to the default sticky footer minus the navbar

getbootstrap.com

 

 

index.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/common :: head('Hello, Spring Boot!')">
</head>

<body class="d-flex flex-column h-100">

<header th:replace="fragments/common :: menu('home')">
</header>

<!-- Begin page content -->
<main class="flex-shrink-0">
    <div class="starter-template">
        <h1 class="mt-5">Spring Boot Tutorial</h1>
        <p class="lead">Spring Boot을 이용해 웹 페이지 제작<br>
            Spring Security, JPA를 이용해 보안 설정과 데이터 다루기</p>
    </div>
</main>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

 

starter-template.css

body {
    padding-top: 5rem;
}
.starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
}

body 부분을 보기 쉽게 css를 적용했다.

 

 

 

list.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/common :: head('게시판')">
</head>

<body class="d-flex flex-column h-100">

<header th:replace="fragments/common :: menu('board')">
</header>

<!-- Begin page content -->
<main class="flex-shrink-0">
    <div class="container">
        <h2>게시판</h2>
        <div>총 건수 : <span th:text="${#lists.size(boards)}"></span></div>
    </div>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">번호</th>
            <th scope="col">제목</th>
            <th scope="col">작성자</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="board : ${boards}">
            <td th:text="${board.id}">Mark</td>
            <td th:text="${board.title}">Otto</td>
            <td>홍길동</td>
        </tr>
        </tbody>
    </table>
    <div class="text-end">
        <button type="button" class="btn btn-primary">쓰기</button>
    </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

table의 row를 thymleaf의 th:each를 사용하여 각 row의 값을 입력 받았다.

 

 

table은 Bootstrap의 table을 사용했다.

https://getbootstrap.com/docs/5.2/content/tables/#overview

 

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

getbootstrap.com

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

 

 

 

 

button 은 Bootstrap의 primary를 사용했다.

https://getbootstrap.com/docs/5.2/components/buttons/#examples

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

 

<button type="button" class="btn btn-primary">Primary</button>

 

 

class="text-end" 를 사용해 버튼의 위치를 오른쪽 끝으로 설정했다.

 

https://getbootstrap.com/docs/5.2/utilities/text/#text-alignment

 

Text

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

getbootstrap.com

 

 

 

MySQL에 데이터를 넣자.

저작자표시 비영리 변경금지

'Bootstrap' 카테고리의 다른 글

Bootstrap - form  (0) 2022.09.08
Bootstrap - starter  (0) 2022.09.06
Bootstrap - Spring Boot에 적용하기  (0) 2022.09.02
복사했습니다!

티스토리툴바