본문 바로가기
웹 개발/Spring

[Web_Spring] 12

유리rr 2022. 6. 24. 23:18

실습

- [Web_Spring] 11 이어서

 

 

 

1. src/main/resource/static/css 경로에 css 파일 추가

- error.css, fontawesome-all.min.css, main.css

 

 

 

2. src/main/resource/static/js 경로에 js 파일 추가

- breakpoints.min.js, browser.min.js, jquery.dropotron.min.js, jquery.min.js, main.js, util.js

 

 

 

3. src/main/resource/templates/board/list.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Board</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="/css/main.css" type="text/css"/>
</head>
<body class="is-preload">
<!-- Main -->
<div id="main">
    <div class="wrapper"> 
        <div class="inner">

            <!-- Elements -->
            <header class="major">
                <h1>Board</h1>
                <p>게시판 목록</p>
            </header>
            <!-- Table -->
            <h3><a href="/board/register" class="button small">글 등록</a></h3>
            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr class="tHead">
                        <th class="boardNumber">번호</th>
                        <th class="boardTitle">제목</th>
                        <th class="boardWriter">작성자</th>
                        <th class="boardRegisterDate">작성일</th>
                        <th class="boardUpdateDate">수정일</th>
                    </tr>
                    </thead>
                    <tbody>
                    <th:block th:each="board:${boardList}">
                        <tr class="tBody" th:object="${board}">
                            <td class="boardNumber" th:text="*{boardNumber}"></td>
                            <td class="boardTitle"><a th:text="*{boardTitle}" th:href="@{/board/read(boardNumber=*{boardNumber})}"></a></td>
                            <td class="boardWriter" th:text="*{boardWriter}"></td>
                            <td class="boardRegisterDate" th:text="*{boardRegisterDate}"></td>
                            <td class="boardUpdateDate" th:text="*{boardUpdateDate}"></td>
                        </tr>
                    </th:block>
                    </tbody>
                </table>
                <div style="text-align: center">
                    <a class="changePage" th:if="${pageDTO.prev}" th:href="${pageDTO.startPage - 1}"><code>&lt;</code></a>
                    <th:block th:each="num:${#numbers.sequence(pageDTO.startPage, pageDTO.endPage)}">
                        <code th:text="${num}" th:if="${pageDTO.criteria.pageNum == num}"></code>
                        <a class="changePage" th:unless="${pageDTO.criteria.pageNum == num}" th:href="${num}"><code th:text="${num}"></code></a>
                    </th:block>
                    <a class="changePage" th:if="${pageDTO.next}" th:href="${pageDTO.endPage + 1}"><code>&gt;</code></a>
                </div>
                <form action="/board/list" th:object="${criteria}" name="pageForm">
                    <input type="hidden" th:field="*{pageNum}">
                    <input type="hidden" th:field="*{amount}">
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<!-- Scripts -->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.dropotron.min.js"></script>
<script src="/js/browser.min.js"></script>
<script src="/js/breakpoints.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<script th:inline="javascript">;
let boardNumber = [[${boardNumber}]];
let $pageForm = $(pageForm);

if(boardNumber != null){
    alert(boardNumber + "번 게시글이 등록되었습니다.");
}

$("a.changePage").on("click", function(e){
    e.preventDefault();
    $pageForm.find("input[name='pageNum']").val($(this).attr("href"));
    $pageForm.submit();
});
</script>
</html>

 

 

 

4. src/main/resource/templates/board/modify.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Board</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="/css/main.css" />
</head>
<body class="is-preload">
<!-- Main -->
<div id="main"> 
    <div class="wrapper">
        <div class="inner">

            <!-- Elements -->
            <header class="major">
                <h1>Board</h1>
                <p>게시글 수정</p>
            </header>
            <!-- Table -->
            <h3><a href="/board/list" class="button small">목록 보기</a></h3>
            <div class="content">
                <div class="form">
                    <form method="post" action="/board/modify">
                        <div class="fields" th:object="${board}">
                            <div class="field">
                                <h4>번호</h4>
                                <input type="text" th:field="*{boardNumber}" readonly/>
                            </div>
                            <div class="field">
                                <h4>*제목</h4>
                                <input type="text" th:field="*{boardTitle}"/>
                            </div>
                            <div class="field">
                                <h4>*내용</h4>
                                <textarea rows="6" style="resize:none" th:field="*{boardContent}"></textarea>
                            </div>
                            <div class="field">
                                <h4>작성자</h4>
                                <input type="text" th:field="*{boardWriter}" readonly/>
                            </div>
                        </div>
                        <ul class="actions special">
                            <li>
                                <input type="submit" class="button" value="수정 완료"/>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.dropotron.min.js"></script>
<script src="/js/browser.min.js"></script>
<script src="/js/breakpoints.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

 

 

 

5. src/main/resource/templates/board/read.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Board</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="/css/main.css" />
</head>
<body class="is-preload">
<!-- Main -->
<div id="main">
    <div class="wrapper">
        <div class="inner">

            <!-- Elements -->
            <header class="major"> 
                <h1>Board</h1>
                <p>게시글 상세보기</p>
            </header>
            <!-- Table -->
            <h3><a href="/board/list" class="button small">목록 보기</a></h3>
            <div class="content">
                <div class="form">
                    <form action="/board/remove" method="post">
                        <div class="fields" th:object="${board}">
                            <div class="field">
                                <h4>번호</h4>
                                <input type="text" th:field="*{boardNumber}" readonly/>
                            </div>
                            <div class="field">
                                <h4>제목</h4>
                                <input type="text" th:field="*{boardTitle}" readonly/>
                            </div>
                            <div class="field">
                                <h4>내용</h4>
                                <textarea rows="6" style="resize:none" th:field="*{boardContent}" readonly></textarea>
                            </div>
                            <div class="field">
                                <h4>작성자</h4>
                                <input type="text" th:field="*{boardWriter}" readonly/>
                            </div>
                        </div>
                        <ul class="actions special">
                            <li>
                                <input type="button" class="button" value="수정" onclick="goUpdate()"/>
                                <input type="submit" class="button" value="삭제"/>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- Scripts -->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.dropotron.min.js"></script>
<script src="/js/browser.min.js"></script>
<script src="/js/breakpoints.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<script th:inline="javascript">
    let boardNumber = [[${board.boardNumber}]];
    function goUpdate(){
        location.href = "/board/modify?boardNumber=" + boardNumber;
    }
</script>
</html>

 

 

 

6. src/main/resource/templates/board/register.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Board</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="/css/main.css" />
</head>
<body class="is-preload">
<!-- Main -->
<div id="main"> 
    <div class="wrapper">
        <div class="inner">
            <!-- Elements -->
            <header class="major">
                <h1>Board</h1>
                <p>게시글 등록</p>
            </header>
            <!-- Table -->
            <h3><a href="/board/list" class="button small">목록 보기</a></h3>
            <div class="content">
                <div class="form">
                    <form method="post" action="/board/register" id="registForm">
                        <div class="fields">
                            <div class="field">
                                <h4>제목</h4>
                                <input name="boardTitle" placeholder="Title" type="text" />
                            </div>
                            <div class="field">
                                <h4>내용</h4>
                                <textarea name="boardContent" rows="6" placeholder="Content" style="resize:none"></textarea>
                            </div>
                            <div class="field">
                                <h4>작성자</h4>
                                <input name="boardWriter" placeholder="Writer" type="text" />
                            </div>
                        </div>
                        <ul class="actions special">
                            <li><input type="submit" class="button" value="등록" /></li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- Scripts -->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.dropotron.min.js"></script>
<script src="/js/browser.min.js"></script>
<script src="/js/breakpoints.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
</html>

 

 

 

7. src/main/resource/templates/error/error.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,400,700" rel="stylesheet">
    <link rel="stylesheet" href="/css/error.css">
    <title>ERROR</title>
</head>
<body> 
<div id="notfound">
    <div class="notfound">
        <div class="notfound-404">
            <h1>Sorry</h1>
            <h2>Error - 작업을 다시 확인해 주세요.</h2>
        </div>
        <a href="javascript:history.go(-1)" style="color:#ff8b77; background:#fff">Go TO Back</a>
        <a href="/board/list">Go TO Board</a>
    </div>
</div>
</body>
</html>

 

 

 

 

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

'웹 개발 > Spring' 카테고리의 다른 글

[Web_Spring] 14  (0) 2022.06.26
[Web_Spring] 13  (0) 2022.06.25
[Web_Spring] 11  (0) 2022.06.23
[Web_Spring] 10  (0) 2022.06.22
[Web_Spring] 09  (0) 2022.06.21

'웹 개발/Spring' Related Articles

티스토리툴바