재밌고 어려운 IT를 이해해보자~!
검색 필터링 [TEAM PROJECT] 본문
CameraReviewSelectAllPageAction.Java
package controller.board;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import controller.front.Action;
import controller.front.ActionForward;
import model.board.BoardDAO;
import model.board.BoardDTO;
public class CameraReviewSelectAllPageAction implements Action {
@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
ActionForward forward = new ActionForward();
BoardDAO boardDAO = new BoardDAO();
BoardDTO boardDTO = new BoardDTO();
boardDTO.setCategory("리뷰"); // 카테고리 세팅 안하면 오류남! else문으로 가기위한 더미값 입력
boardDTO.setSearchCondition("");
ArrayList<BoardDTO> boardDatas = boardDAO.selectAll(boardDTO);
System.out.println(boardDatas);
if (boardDatas != null) {
// Gson 인스턴스 생성
Gson gson = new Gson();
// Java 객체를 JSON 문자열로 변환
String json = gson.toJson(boardDatas);
// JSP에 JSON 문자열 전달
request.setAttribute("boardDatasJson", json);
request.setAttribute("boardDatas", boardDatas);
forward.setPath("board/cameraReviewSelectAllPage.jsp");
forward.setRedirect(false);
} else {
forward.setPath("error/alertPage.jsp");
}
return forward;
}
}리스트 객체를 JSP로 넘겨줄땐 JSON 문자열로 변환시켜서 넘겨줘야한다 ...
따라서 두개의 데이터를 request에 set!
CameraReviewSelectAllPageAction.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
import="model.board.*,java.util.ArrayList,com.google.gson.Gson"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="stone"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<!-- 문자 인코딩 및 메타 정보 설정 -->
<meta charset="UTF-8">
<title>카메라 리뷰 게시판</title>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 외부 CSS 파일 링크 -->
<link rel="stylesheet" href="/chalKag/assets/css/main.css" />
</head>
<body class="is-preload">
<script>
// Java에서 전송한 데이터를 JavaScript에 할당
var boardDatas = ${boardDatasJson};
function onClickFilter() {
var lowerPrice = parseInt(document.getElementById('minAmount').value, 10);
var upperPrice = parseInt(document.getElementById('maxAmount').value, 10);
console.log(lowerPrice);
console.log(upperPrice);
// 가격 범위에 따라 boardDatas 필터링
var filteredData = boardDatas.filter(function (data) {
var dataPrice = parseInt(data.price, 10);
console.log(dataPrice);
return !isNaN(dataPrice) && lowerPrice <= dataPrice && dataPrice <= upperPrice;
});
// 기존 테이블 본문 내용 지우기
var tableBody = document.querySelector('.table-wrapper table tbody');
tableBody.innerHTML = '';
// 필터링된 데이터로 테이블 채우기
filteredData.forEach(function (data) {
var row = tableBody.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.textContent = data.boardNum;
var link = document.createElement('a');
link.href = "/chalKag/cameraReviewSelectOnePage.do?boardNum=" + data.boardNum;
link.textContent = data.title;
cell2.appendChild(link);
cell3.textContent = data.id;
cell4.textContent = data.boardDate;
cell5.textContent = data.recommendNum;
cell6.textContent = data.viewCount;
});
// 필터된 데이터가 없을 경우 메시지 표시
if (filteredData.length === 0) {
var noDataMessage = document.createElement('p');
noDataMessage.textContent = 'No data matching the criteria.';
tableBody.appendChild(noDataMessage);
}
}
document.addEventListener('DOMContentLoaded', function () {
var filterButton = document.getElementById('filterButton');
filterButton.addEventListener('click', function () {
onClickFilter();
});
});
</script>
<!-- 커스텀 태그를 사용하여 네비게이션 포함 -->
<stone:printNav member='${member}' />
<!-- 메인 콘텐츠 래퍼 -->
<div id="main">
<!-- 카메라 리뷰 게시판 데이터 선택을 위한 폼 -->
<!-- featured 포스트 섹션 -->
<div class="post featured">
<header class="major">
<h2>
camera review board
<!-- <a href="#">camera review board</a> -->
</h2>
<br>
<p>
Discover the world through lenses! 📷 Welcome to our Camera Review
Board, <br>where shutterbugs unite to share insights on the
latest cameras. <br>Dive into detailed reviews, expert
opinions, and community discussions.
</p>
</header>
</div>
<hr>
<!-- 검색 폼 섹션 -->
<div class="pricefilter">
<label for="minAmount">최소금액:</label> <input type="text"
id="minAmount" name="minAmount" placeholder="최소금액을 입력하세요" required>
<br> <label for="maxAmount">최대금액:</label> <input type="text"
id="maxAmount" name="maxAmount" placeholder="최대금액을 입력하세요" required>
<button type="button" name="확정" id="filterButton">확정</button>
</div>
<div>
<select name="serchField" style="width: 40%; display: inline-block;">
<option value="title">제목</option>
<option value="content">작성자</option>
<option value="productName">상품명</option>
<option value="company">제조사</option>
</select> <input type="text" name="search"
style="margin-left: 10px; width: 40%; display: inline-block;"
placeholder="검색어를 입력해 주세요."> <input type="button"
value="SERCH" style="margin-left: 10px; width: 15%;"
onclick="Update.do">
<!-- <input type="submit" style="margin-left: 10px; width: 15%;" value="검색하기"> -->
</div>
<!-- 리뷰 게시판 데이터를 테이블로 표시하는 섹션 -->
<div class="table-wrapper" style="margin-top: 20px;">
<table class="alt" style="margin-top: 30px;">
<thead>
<tr>
<th width="10%">boardNum</th>
<th width="*">title</th>
<th width="15%">writer</th>
<th width="15%">boardDate</th>
<th width="10%">recommend</th>
<th width="10%">views</th>
</tr>
</thead>
<!-- JSTL forEach를 사용하여 카메라 리뷰 데이터 반복 처리하여 출력-->
<tbody>
<!-- 출력할 게시글 정보(boardDatas)가 없을 경우 출력 문구 -->
<c:if test="${fn:length(boardDatas) <= 0}">
<tr>
<td colspan="10" align="center">등록된 글이 없습니다!</td>
</tr>
</c:if>
<!-- 출력할 게시글 정보(boardDatas)가 없을 경우 있을 경우 반복문을 사용하여 전체 목록 출력 -->
<c:if test="${fn:length(boardDatas) > 0}">
<c:forEach var="data" items="${boardDatas}">
<tr>
<td name="boardNum">${data.boardNum}</td>
<!-- 게시글 상새 페이지로 연결되는 태그 -->
<td><a
href="/chalKag/cameraReviewSelectOnePage.do?boardNum=${data.boardNum}">${data.title}</a></td>
<td>${data.id}</td>
<td>${data.boardDate}</td>
<td>${data.recommendNum}</td>
<td>${data.viewCount}</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
<!-- 페이징을 포함한 푸터 섹션 -->
<footer>
<div class="pagination">
<!--<a href="#" class="previous">Prev</a>-->
<a href="#" class="page active">1</a> <a href="#" class="page">2</a>
<a href="#" class="page">3</a> <span class="extra">…</span> <a
href="#" class="page">8</a> <a href="#" class="page">9</a> <a
href="#" class="page">10</a> <a href="#" class="next">Next</a>
</div>
</footer>
</div>
<!-- 커스텀 태그를 사용하여 저작권 정보 포함 -->
<stone:copyright />
<!-- JavaScript 파일 링크 -->
<script src="/chalKag/assets/js/jquery.min.js"></script>
<script src="/chalKag/assets/js/jquery.scrollex.min.js"></script>
<script src="/chalKag/assets/js/jquery.scrolly.min.js"></script>
<script src="/chalKag/assets/js/browser.min.js"></script>
<script src="/chalKag/assets/js/breakpoints.min.js"></script>
<script src="/chalKag/assets/js/util.js"></script>
<script src="/chalKag/assets/js/main.js"></script>
</body>
</html>최소금액 최대금액 을 유저로부터 입력받아 확정버튼을 누르면 filter 메서드를 통해
리스트의 각 data들의 price를 확인해서 유저가 입력한 Max Min값의 사이값들만 필터링해서 테이블을 새로 채워준다..
필요한 준비물
import com.google.gson.Gson;
을 위한 gson-2.8.9.jar...
JSP에 JSON 문자열 전달하기위해서 필요하다!
'코리아IT핀테크과정' 카테고리의 다른 글
| Pagination [TEAM PROJECT] (0) | 2024.02.15 |
|---|---|
| QUERY를 이용한 검색 필터링 [TEAM PROJECT] (0) | 2024.02.02 |
| VIEW에 JSTL, EL, CustomTag 사용하기 [TEAM PROJECT] (0) | 2024.01.23 |
| Image Upload Update [TEAM PROJECT] (0) | 2024.01.20 |
| HandlerMapper, Factory pattern (2) | 2024.01.19 |
'코리아IT핀테크과정' Related Articles
more
Comments