강좌 77 - 목록 페이지에서 검색 추가하기
1. Products.jsp 검색폼 추가
- 키:f, 값: pname, des
- 키:q, 값: 검색 입력 내용
- list?f=pname&q=갤럭시
<div class="d-flex flex-row-reverse">
<form class="row g-3">
<div class="col-auto" style="padding-right: 0px">
<select name="f" class="form-select form-select" > <!-- 키:f, 값: pname, des -->
<option selected>menu</option>
<option value="pname">상품명</option>
<option value="description">상품설명</option>
</select>
</div>
<div class="col-auto" style="padding-right: 0px">
<label for="search" class="visually-hidden">search</label>
<input name="q" type="text" class="form-control" id="search" placeholder="search">
</div> <!-- value 들어가야하나 --> <!-- list?f=pname&q=갤럭시 -->
<div class="col-auto">
<input type="submit" class="btn btn-primary mb-3">search</input>
</div>
</form>
</div>productController.java
package controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.ProductRepository;
import dto.Product;
import entity.ProductDetail;
import service.ProductsService;
@WebServlet("/products")
public class ProductsController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// list?f=pname&q=갤럭시
String field_ = request.getParameter("f");
String query_ = request.getParameter("q");
String field = "pname";
if(field_ != null)
field = field_;
String query = "";
if(query_ != null)
field = query_;
List<ProductDetail> plist = new ArrayList<ProductDetail>();
// ProductRepository dao = new ProductRepository();
// List<Product> listOfProducts = dao.getAllProducts(); 그럼dao의 얘는 필요없나?
ProductsService productsService = new ProductsService();
List<Product> listOfProducts = productsService.getProductList(field, query, 1);
for (Product product : listOfProducts) {
String filename = product.getFilename() ;
String pname= product.getPname() ;
String description = product.getDescription() ;
String productId = product.getProductId() ;
String manufacturer = product.getManufacturer() ;
String category = product.getCategory();
long unitsInStock = product.getUnitsInStock() ;
Integer unitPrice = product.getUnitPrice() ;
ProductDetail productDetail = new ProductDetail(filename, pname, description, productId, manufacturer, category, unitsInStock, unitPrice);
plist.add(productDetail);
}
request.setAttribute("plist", plist);
// foward
request.getRequestDispatcher("/WEB-INF/view/products.jsp").forward(request, response);
//request.getRequestDispatcher("/WEB-INF/view/menu.jsp").forward(request, response);
}
}결과
 |  |
|---|
2. 입력한 검색 내용이 input 창에 계속 남게
3. 선택한 검색 카테고리인 채로 계속 남게
products.jsp
<div class="d-flex flex-row-reverse">
<form class="row g-3">
<div class="col-auto" style="padding-right: 0px">
<select name="f" class="form-select form-select" > <!-- 키:f, 값: pname, des -->
<!-- <option selected>선택</option> -->
<option ${(param.f == "pname")? "selected" : ""} value="pname">상품명</option>
<option ${(param.f == "descriptions")? "selected" : ""} value="descriptions">상품설명</option>
</select>
</div>
<div class="col-auto" style="padding-right: 0px">
<label for="search" class="visually-hidden">search</label>
<input name="q" type="text" class="form-control" value="${param.q}" placeholder="search">
</div> <!-- list?f=pname&q=갤럭시 -->
<div class="col-auto">
<input type="submit" class="btn btn-primary mb-3" value="search"></input>
</div>
</form>
</div>
강좌 78 - 목록에서 페이징 구현하기
1. products.jsp 원래
<nav aria-label="Page navigation example">
<c:set var="page" value="${ (param.p == null )?1 : param.p}" />
<c:set var="startNum" value="${page-(page-1)%5}" />
<!-- 임시변수 태그 var에 value를 집어넣는다/ var은 pageContext에 저장됨 -->
<c:set var="lastNum" value="23" />
<ul class="pagination justify-content-center">
<c:if test="${startNum-5>=1}">
<li class="page-item"><a class="page-link"
href="?p=${startNum-5}&t=&q=">Previous</a></li>
</c:if>
<c:forEach var="i" begin="0" end="4">
<li class="page-item"><a class="page-link"
href="?p=${startNum+i}&t=&q=">${startNum+i}</a></li>
</c:forEach>
<c:if test="${startNum+5<lastNum}">
<li class="page-item"><a class="page-link"
href="?p=${startNum+5}&t=&q="">Next</a></li>
</c:if>
</ul>
</nav>2. 변경
products.jsp
<c:forEach var="i" begin="0" end="4">
<li class="page-item"><a class="page-link"
href="?p=${startNum+i}&f=${param.f}&q=${param.q}">${startNum+i}</a></li>
</c:forEach>productsController.java
String field_ = request.getParameter("f");
String query_ = request.getParameter("q");
String page_ = request.getParameter("p");
// null 일수도있기때문에 string
String field = "pname";
if(field_ != null)
field = field_;
String query = "";
if(query_ != null)
query = query_;
int page = 1;
if(page_ != null)
page = Integer.parseInt(page_) ;
오류 수정
String field = "pname";
if(field_ != null && !field_.equals(""))
field = field_;
String query = "";
if(query_ != null && !query_.equals(""))
query = query_;
int page = 1;
if(page_ != null && !page_.equals(""))
page = Integer.parseInt(page_) ;결과
 |  |
|---|
강좌 79 - Pager에서 현재 페이지 번호 처리
- 현재 페이지 수는 필요하지 않으니까 일단 패스 ( empty 정도는 알아두기 )
products.jsp
- 현재페이지만 음영
<c:forEach var="i" begin="0" end="4">
<li class="page-item ${ (param.p == (startNum+i))? 'active' : '' } ">
<a class="page-link"
href="?p=${startNum+i}&f=${param.f}&q=${param.q}">${startNum+i}</a></li>
</c:forEach>페이지가 null 또는 없을 때 코드 개선
<c:set var="page" value="${ (param.p == null )?1 : param.p}" />
<c:forEach var="i" begin="0" end="4">
<li class="page-item ${ (page == (startNum+i))? 'active' : '' } ">
<a class="page-link"
href="?p=${startNum+i}&f=${param.f}&q=${param.q}">${startNum+i}</a></li>
</c:forEach>
---
결과
 |  |
|---|
강좌 80 - Pager에서 마지막 번호 처리하기
taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
- 마지막페이지가 현재와 같거나 현재보다 클 때만 다음 페이지 숫자가 보이게
비전공자 독학러. 일단 쌔린다. 개발 공부👊