Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
Tags
- 깃
- 처음 만나는 AI 수학 with Python
- 서버설정
- network configuration
- 페이징
- 자료구조와 함께 배우는 알고리즘 입문
- 자료구조와함께배우는알고리즘입문
- 이터레이터
- iterator
- 병합
- 알파회계
- Kernighan의 C언어 프로그래밍
- 목록처리
- /etc/network/interfaces
- 스프링 시큐리티
- 구멍가게코딩단
- 스프링부트핵심가이드
- resttemplate
- 코드로배우는스프링부트웹프로젝트
- GIT
- 친절한SQL튜닝
- 선형대수
- 자바편
- 티스토리 쿠키 삭제
- 처음 만나는 AI수학 with Python
- merge
- 코드로배우는스프링웹프로젝트
- 리눅스
- 네트워크 설정
- 데비안
Archives
- Today
- Total
bright jazz music
guestbook : 11. 검색처리(2) 본문
● 화면에서의 처리
검색 처리를 위해서는 검색타입(type)과 키워드(keyword)를 입력할 수 있는 UI가 필요하다.
검색 자체가 GET방식이므로 한글이 아니라면 GET방식의 쿼리스트링을 조작해서 테스트 할 수 있다.
예를 들어 아래와 같은 경로와 쿼리스트링을 주소창에 적어주어도 검색이 가능하다.
'/guestbook/list?page=1&type=t&keyword=11'
예) localhost:8080//guestbook/list?page=1&type=t&keyword=11
==> 제목(t) 안에 '11'이라는 문자열이 포함된 게시글들의 1페이지를 확인할 수 있다.
1. list 페이지에 검색 타입과 키워드 셀렉트 박스와 검색 버튼 추가하기
- 검색을 위한 셀렉트 박스, 검색창, 검색 버튼, clear버튼을 추가.
- <form>태그가 <h1>태그 밑, <table> 태그 위에 존재하도록 배치
<!--list.html-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content})}">
<th:block th:fragment="content">
<h1>GuestBook List Page!!!!
<!-- 등록버튼 추가: 버튼을 누르면 링크로 이동한다-->
<span>
<a th:href="@{/guestbook/register}">
<button type="button" class="btn btn-outline-primary">
REGISTER!!
</button>
</a>
</span>
</h1>
<!-- 검색을 위한 form 작성 -->
<form action="/guestbook/list/" method="get" id="searchForm">
<div class="input-group">
<input type="hidden" name="page" value="1">
<div class="input-group-prepend">
<select class="custom-select" name="type">
<option th:selected="${pageRequestDTO.type == null}"> ----- </option>
<option value="t" th:selected="${pageRequestDTO.type == 't'}">제목</option>
<option value="c" th:selected="${pageRequestDTO.type == 'c'}">내용</option>
<option value="w" th:selected="${pageRequestDTO.type == 'w'}">작성자</option>
<option value="tc" th:selected="${pageRequestDTO.type == 'tc'}">제목 + 내용</option>
<option value="tcw" th:selected="${pageRequestDTO.type == 'tcw'}">제목 + 내용 + 작성자</option>
</select>
</div>
<input class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary btn-search" type="button">Search</button>
<button class="btn btn-outline-secondary btn-clear" type="button">Clear</button>
</div>
</div>
</form>
<table class="table table-striped"> <!--테이블이 줄무늬로 나옴. table-hover 하면 커서가 올라가면 색 바뀜 -->
<thead>
<tr>
<th scope="col">#</th>
<!-- <th scope="col">Gno</th>-->
<th scope="col">Title</th>
<th scope="col">Writer</th>
<th scope="col">Regdate</th>
</tr>
</thead>
<tbody>
<tr th:each="dto : ${result.dtoList}"> <!--PageResultDTO안에 들어있는 dtoList 반복처리-->
<th scope="row">
<!-- 링크처리: 링크를 누르면 /guestbook/read에 gno와 page를 파라미터로 전달 -->
<a th:href="@{/guestbook/read(gno = ${dto.gno}, page = ${result.page})}">
[[${dto.gno}]]
</a>
</th>
<td>[[${dto.title}]]</td>
<td>[[${dto.writer}]]</td>
<!-- <td>[[${dto.regDate}]]</td>-->
<td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td><!--등록일자를 포맷으로 출력-->
</tr>
</tbody>
</table>
<!-- 페이지 이동을 위한 태그-->
<ul class="pagination h-100 justify-content-center align-items-center"> <!-- ul 태그 안에는 전부 적용 -->
<!--h-100: 가로로 표시, justify-content-center: 페이지의 중앙에 표시 왼쪽은 start 오른쪽은 end-->
<li class="page-item" th:if="${result.prev}">
<a class="page-link" th:href="@{/guestbook/list(page= ${result.start -1 })}"
tabindex="-1">Previous!</a>
<!-- pageSize가 10이기 떄문에 11페이지 이상부터 Previous! 버튼이 나타난다.-->
</li>
<li th:class=" 'page-item ' + ${result.page == page?'active':''} "th:each="page: ${result.pageList}">
<a class="page-link" th:href="@{/guestbook/list(page= ${page})}">
[[${page}]]
</a>
</li>
<li class="page-item" th:if="${result.next}">
<a class="page-link" th:href="@{/guestbook/list(page= ${result.end + 1})}">Next!</a>
</li>
</ul>
<!-- 추가 태그 끝
'이전(previous)'과 '다음(next)' 부분은 Thymeleaf의 if를 이용해서 처리.
페이지 중간에 현재 페이지 여부를 체크해서 'active'라는 이름의 클래스가 출력되도록 작성
-->
<!-- 모달창 관련 -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here!!!!!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script th:inline="javascript">
var msg = [[${msg}]];
console.log(msg);
if(msg){
$(".modal").modal();
}
</script>
</th:block>
</th:block>
- <select> 태그는 검색 타입을 선택하는 용도로 사용한다. PageRequestDTO를 이용해 검색 타입에 맞게 자동으로 선택될 수 있도록 구성.
- 키워드는 <input>태그로 처리
- Search버튼은 class 속성 값으로 btn-search를 가진다.
- Clear버튼은 class 속성 값으로 btn-clear를 가진다.
- <form>태그 아래의 <input type="hidden">으로 처리된 page값이 1로 지정되어 있다.
- 이는 Search버튼을 누르는 경우 새로운 검색을 진행하는 것이기 때문에 무조건 1페이지가 반환되도록 하려는 의도이다.
- 이 상태에서 쿼리스트링을 사용해 검색하면 타입과 키워드가 입력된 형태로 출력된다.
쿼리스트링을 이용한 테스트
아래의 쿼리 스트링을 주소창에 입력하여 테스트한다.
http://localhost:8080/guestbook/list?page=1&type=t&keyword=타이틀
- type이 t 또는 tcw인 경우에만 검색된다. c 또는 w로 지정하면 위 게시글이 반환되지 않는다.
- 게시글이 2페이지까지 넘어가지 않는 경우, page를 2로 지정하면 게시글이 반환되지 않는다.
2. Clear버튼의 이벤트 처리
- list.html 하단에 search버튼과 clear버튼 처리를 위한 자바스크립트 삽입
<!--list.html-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content})}">
<th:block th:fragment="content">
<h1>GuestBook List Page!!!!
<!-- 등록버튼 추가: 버튼을 누르면 링크로 이동한다-->
<span>
<a th:href="@{/guestbook/register}">
<button type="button" class="btn btn-outline-primary">
REGISTER!!
</button>
</a>
</span>
</h1>
<!-- 검색을 위한 form 작성 -->
<form action="/guestbook/list/" method="get" id="searchForm">
<div class="input-group">
<input type="hidden" name="page" value="1">
<div class="input-group-prepend">
<select class="custom-select" name="type">
<option th:selected="${pageRequestDTO.type == null}"> ----- </option>
<option value="t" th:selected="${pageRequestDTO.type == 't'}">제목</option>
<option value="c" th:selected="${pageRequestDTO.type == 'c'}">내용</option>
<option value="w" th:selected="${pageRequestDTO.type == 'w'}">작성자</option>
<option value="tc" th:selected="${pageRequestDTO.type == 'tc'}">제목 + 내용</option>
<option value="tcw" th:selected="${pageRequestDTO.type == 'tcw'}">제목 + 내용 + 작성자</option>
</select>
</div>
<input class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary btn-search" type="button">Search</button>
<button class="btn btn-outline-secondary btn-clear" type="button">Clear</button>
</div>
</div>
</form>
<table class="table table-striped"> <!--테이블이 줄무늬로 나옴. table-hover 하면 커서가 올라가면 색 바뀜 -->
<thead>
<tr>
<th scope="col">#</th>
<!-- <th scope="col">Gno</th>-->
<th scope="col">Title</th>
<th scope="col">Writer</th>
<th scope="col">Regdate</th>
</tr>
</thead>
<tbody>
<tr th:each="dto : ${result.dtoList}"> <!--PageResultDTO안에 들어있는 dtoList 반복처리-->
<th scope="row">
<!-- 링크처리: 링크를 누르면 /guestbook/read에 gno와 page를 파라미터로 전달 -->
<a th:href="@{/guestbook/read(gno = ${dto.gno}, page = ${result.page})}">
[[${dto.gno}]]
</a>
</th>
<td>[[${dto.title}]]</td>
<td>[[${dto.writer}]]</td>
<!-- <td>[[${dto.regDate}]]</td>-->
<td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td><!--등록일자를 포맷으로 출력-->
</tr>
</tbody>
</table>
<!-- 페이지 이동을 위한 태그-->
<ul class="pagination h-100 justify-content-center align-items-center"> <!-- ul 태그 안에는 전부 적용 -->
<!--h-100: 가로로 표시, justify-content-center: 페이지의 중앙에 표시 왼쪽은 start 오른쪽은 end-->
<li class="page-item" th:if="${result.prev}">
<a class="page-link" th:href="@{/guestbook/list(page= ${result.start -1 })}"
tabindex="-1">Previous!</a>
<!-- pageSize가 10이기 떄문에 11페이지 이상부터 Previous! 버튼이 나타난다.-->
</li>
<li th:class=" 'page-item ' + ${result.page == page?'active':''} "th:each="page: ${result.pageList}">
<a class="page-link" th:href="@{/guestbook/list(page= ${page})}">
[[${page}]]
</a>
</li>
<li class="page-item" th:if="${result.next}">
<a class="page-link" th:href="@{/guestbook/list(page= ${result.end + 1})}">Next!</a>
</li>
</ul>
<!-- 추가 태그 끝
'이전(previous)'과 '다음(next)' 부분은 Thymeleaf의 if를 이용해서 처리.
페이지 중간에 현재 페이지 여부를 체크해서 'active'라는 이름의 클래스가 출력되도록 작성
-->
<!-- 모달창 관련 -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here!!!!!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script th:inline="javascript">
var msg = [[${msg}]];
console.log(msg);
if(msg){
$(".modal").modal();
}
//Search버튼 기능
var searchForm = $("#searchForm");
$('.btn-search').click(function (e) {
searchForm.submit();
});
//Clear버튼 기능
$('.btn-clear').click(function (e) {
searchForm.empty().submit();
});
</script>
</th:block>
</th:block>Search버튼의 작동
- class 속성인 btn-search를 통해 연결한다. 버튼을 누르면 form이 submit 된다.
- form의 action이 /guestbook/list이므로 해당 경로로 get 메소드를 사용해 form 데이터를 전달한다.
- 즉, btn-search를 클릭하면 새롭게 선택된 검색 타입과 키워드로 1페이지를 검색한다.
Clear버튼의 작동
- class 속성인 btn-clear를 통해 연결한다. 버튼을 누르면 form이 empty()를 사용하여 비워진다.
- 빈 form데이터가 /guestbook/list로 전달된다.
- 즉, btn-clear를 클릭하면 검색과 관련된 모든 내용을 삭제하고 검색 조건이 적용되지 않는 목록 페이지를 호출한다.
3. 페이지 번호의 검색 조건 추가
guestbook/list 하단의 검색은 단순히 page라는 값만을 처리하므로, 검색타입(type)과 키워드를 추가해야 한다.
<!--list.html-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content})}">
<th:block th:fragment="content">
<h1>GuestBook List Page!!!!
<!-- 등록버튼 추가: 버튼을 누르면 링크로 이동한다-->
<span>
<a th:href="@{/guestbook/register}">
<button type="button" class="btn btn-outline-primary">
REGISTER!!
</button>
</a>
</span>
</h1>
<!-- 검색을 위한 form 작성 -->
<form action="/guestbook/list/" method="get" id="searchForm">
<div class="input-group">
<input type="hidden" name="page" value="1">
<div class="input-group-prepend">
<select class="custom-select" name="type">
<option th:selected="${pageRequestDTO.type == null}"> ----- </option>
<option value="t" th:selected="${pageRequestDTO.type == 't'}">제목</option>
<option value="c" th:selected="${pageRequestDTO.type == 'c'}">내용</option>
<option value="w" th:selected="${pageRequestDTO.type == 'w'}">작성자</option>
<option value="tc" th:selected="${pageRequestDTO.type == 'tc'}">제목 + 내용</option>
<option value="tcw" th:selected="${pageRequestDTO.type == 'tcw'}">제목 + 내용 + 작성자</option>
</select>
</div>
<input class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary btn-search" type="button">Search</button>
<button class="btn btn-outline-secondary btn-clear" type="button">Clear</button>
</div>
</div>
</form>
<table class="table table-striped"> <!--테이블이 줄무늬로 나옴. table-hover 하면 커서가 올라가면 색 바뀜 -->
<thead>
<tr>
<th scope="col">#</th>
<!-- <th scope="col">Gno</th>-->
<th scope="col">Title</th>
<th scope="col">Writer</th>
<th scope="col">Regdate</th>
</tr>
</thead>
<tbody>
<tr th:each="dto : ${result.dtoList}"> <!--PageResultDTO안에 들어있는 dtoList 반복처리-->
<th scope="row">
<!-- 링크처리: 링크를 누르면 /guestbook/read에 gno와 page를 파라미터로 전달 -->
<a th:href="@{/guestbook/read(gno = ${dto.gno}, page = ${result.page})}">
[[${dto.gno}]]
</a>
</th>
<td>[[${dto.title}]]</td>
<td>[[${dto.writer}]]</td>
<!-- <td>[[${dto.regDate}]]</td>-->
<td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td><!--등록일자를 포맷으로 출력-->
</tr>
</tbody>
</table>
<!-- 페이지 이동을 위한 태그-->
<ul class="pagination h-100 justify-content-center align-items-center"> <!-- ul 태그 안에는 전부 적용 -->
<!--h-100: 가로로 표시, justify-content-center: 페이지의 중앙에 표시 왼쪽은 start 오른쪽은 end-->
<li class="page-item" th:if="${result.prev}">
<!--########### 검색을 위해 타입과 키워드 추가 ############# -->
<a class="page-link" th:href="@{/guestbook/list(page= ${result.start -1 },
type=${pageRequestDTO.type},
keyword=${pageRequestDTO.keyword} )}"
tabindex="-1">Previous!</a>
<!-- pageSize가 10이기 떄문에 11페이지 이상부터 Previous! 버튼이 나타난다.-->
</li>
<li th:class=" 'page-item ' + ${result.page == page?'active':''} "th:each="page: ${result.pageList}">
<!--############# 검색을 위해 타입과 키워드 추가 ############# -->
<a class="page-link" th:href="@{/guestbook/list(page= ${page},
type=${pageRequestDTO.type},
keyword=${pageRequestDTO.keyword} )}">
[[${page}]]
</a>
</li>
<li class="page-item" th:if="${result.next}">
<!--############# 검색을 위해 타입과 키워드 추가 ############# -->
<a class="page-link" th:href="@{/guestbook/list(page= ${result.end + 1},
type=${pageRequestDTO.type},
keyword=${pageRequestDTO.keyword} )}">Next!</a>
</li>
</ul>
<!-- 추가 태그 끝
'이전(previous)'과 '다음(next)' 부분은 Thymeleaf의 if를 이용해서 처리.
페이지 중간에 현재 페이지 여부를 체크해서 'active'라는 이름의 클래스가 출력되도록 작성
-->
<!-- 모달창 관련 -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here!!!!!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script th:inline="javascript">
var msg = [[${msg}]];
console.log(msg);
if(msg){
$(".modal").modal();
}
//Search버튼 기능
var searchForm = $("#searchForm");
$('.btn-search').click(function (e) {
searchForm.submit();
});
//Clear버튼 기능
$('.btn-clear').click(function (e) {
searchForm.empty().submit();
});
</script>
</th:block>
</th:block>
4. 조회 페이지로 이동하는 검색 처리
- 목록페이지에서 마지막으로 처리해야 하는 내용은 특정 글의 번호를 클릭해서 이동(조회)하는 부분이다.
- 이는 페이지 처리와 동일하게 type과 keyword 항목을 추가하면 된다.
<!--list.html-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content})}">
<th:block th:fragment="content">
<h1>GuestBook List Page!!!!
<!-- 등록버튼 추가: 버튼을 누르면 링크로 이동한다-->
<span>
<a th:href="@{/guestbook/register}">
<button type="button" class="btn btn-outline-primary">
REGISTER!!
</button>
</a>
</span>
</h1>
<!-- 검색을 위한 form 작성 -->
<form action="/guestbook/list/" method="get" id="searchForm">
<div class="input-group">
<input type="hidden" name="page" value="1">
<div class="input-group-prepend">
<select class="custom-select" name="type">
<option th:selected="${pageRequestDTO.type == null}"> ----- </option>
<option value="t" th:selected="${pageRequestDTO.type == 't'}">제목</option>
<option value="c" th:selected="${pageRequestDTO.type == 'c'}">내용</option>
<option value="w" th:selected="${pageRequestDTO.type == 'w'}">작성자</option>
<option value="tc" th:selected="${pageRequestDTO.type == 'tc'}">제목 + 내용</option>
<option value="tcw" th:selected="${pageRequestDTO.type == 'tcw'}">제목 + 내용 + 작성자</option>
</select>
</div>
<input class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary btn-search" type="button">Search</button>
<button class="btn btn-outline-secondary btn-clear" type="button">Clear</button>
</div>
</div>
</form>
<table class="table table-striped"> <!--테이블이 줄무늬로 나옴. table-hover 하면 커서가 올라가면 색 바뀜 -->
<thead>
<tr>
<th scope="col">#</th>
<!-- <th scope="col">Gno</th>-->
<th scope="col">Title</th>
<th scope="col">Writer</th>
<th scope="col">Regdate</th>
</tr>
</thead>
<tbody>
<tr th:each="dto : ${result.dtoList}"> <!--PageResultDTO안에 들어있는 dtoList 반복처리-->
<th scope="row">
<!-- 링크처리: 링크를 누르면 /guestbook/read에 gno와 page를 파라미터로 전달 -->
<!--################ 검색을 위해 타입과 키워드 추가 ############## -->
<a th:href="@{/guestbook/read(gno = ${dto.gno}, page = ${result.page},
type=${pageRequestDTO.type}, keyword=${pageRequestDTO.keyword} )}">
[[${dto.gno}]]
</a>
</th>
<td>[[${dto.title}]]</td>
<td>[[${dto.writer}]]</td>
<!-- <td>[[${dto.regDate}]]</td>-->
<td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td><!--등록일자를 포맷으로 출력-->
</tr>
</tbody>
</table>
<!-- 페이지 이동을 위한 태그-->
<ul class="pagination h-100 justify-content-center align-items-center"> <!-- ul 태그 안에는 전부 적용 -->
<!--h-100: 가로로 표시, justify-content-center: 페이지의 중앙에 표시 왼쪽은 start 오른쪽은 end-->
<li class="page-item" th:if="${result.prev}">
<!-- 검색을 위해 타입과 키워드 추가 -->
<a class="page-link" th:href="@{/guestbook/list(page= ${result.start -1 },
type=${pageRequestDTO.type},
keyword=${pageRequestDTO.keyword} )}"
tabindex="-1">Previous!</a>
<!-- pageSize가 10이기 떄문에 11페이지 이상부터 Previous! 버튼이 나타난다.-->
</li>
<li th:class=" 'page-item ' + ${result.page == page?'active':''} "th:each="page: ${result.pageList}">
<!-- 검색을 위해 타입과 키워드 추가 -->
<a class="page-link" th:href="@{/guestbook/list(page= ${page},
type=${pageRequestDTO.type},
keyword=${pageRequestDTO.keyword} )}">
[[${page}]]
</a>
</li>
<li class="page-item" th:if="${result.next}">
<!-- 검색을 위해 타입과 키워드 추가 -->
<a class="page-link" th:href="@{/guestbook/list(page= ${result.end + 1},
type=${pageRequestDTO.type},
keyword=${pageRequestDTO.keyword} )}">Next!</a>
</li>
</ul>
<!-- 추가 태그 끝
'이전(previous)'과 '다음(next)' 부분은 Thymeleaf의 if를 이용해서 처리.
페이지 중간에 현재 페이지 여부를 체크해서 'active'라는 이름의 클래스가 출력되도록 작성
-->
<!-- 모달창 관련 -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here!!!!!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script th:inline="javascript">
var msg = [[${msg}]];
console.log(msg);
if(msg){
$(".modal").modal();
}
//Search버튼 기능
var searchForm = $("#searchForm");
$('.btn-search').click(function (e) {
searchForm.submit();
});
//Clear버튼 기능
$('.btn-clear').click(function (e) {
searchForm.empty().submit();
});
</script>
</th:block>
</th:block>
목록에서 글 번호를 선택하여 조회하는 경우 원래는 쿼리스트링에 타입과 키워드가 들어 있지 않았다.
'Framework > Spring' 카테고리의 다른 글
| [bootBoard] N:1(다대일) 연관관계: 1.연관관계와 DB 설계 (0) | 2022.07.25 |
|---|---|
| guestbook: 11. 검색처리(3) (0) | 2022.07.24 |
| guestbook : 11. 검색처리(1) (0) | 2022.07.22 |
| guestbook : 10. guestbook 게시글 수정/삭제 처리(3) (0) | 2022.07.21 |
| guestbook : 10. guestbook 게시글 수정/삭제 처리(2) (0) | 2022.07.21 |
'Framework/Spring' Related Articles
more
Comments