1-3 상품 검색

• 헤더에 배치하여 어디에서든 상품을 검색할 수 있도록 하였다
•  검색을 하면 검색페이지로 이동한다
  • 상품명으로 검색이 가능하고 검색된 상품 갯수도 불러온다
  •  검색한 상품이 DB에 없을 경우 '검색 결과 없음'으로 뜨게끔 하였다

 

 

 

 

---

 

 

 

 

 

 

 

 

• 검색창
  • 검색했을 때 검색단어가 그대로 남아있게

<div id = "cont-wrap" >
			<div class="cate_top_txt"><h1>search</h1></div>
        </div>
		<div class="search_bar">
                 <form  name="frm_search" role="search" method="get" class="search-form" >
                     <input type="search" class="search-field" placeholder="상품명" value="${param.findStr }" name="findStr" />
                    <input type="submit"  name="btnFind" class="search-submit" value = "검색"/>
                    <input type="hidden" name="nowPage" value="${(empty param.nowPage)? 1: param.nowPage}" size="10">
					<input type="hidden" name="serial" size="10" >
					<input type="hidden" name="search" value="select">
                 </form>
        </div>

 

 

 

• 스크립틀릿(서블릿을 써도 됨)
  • findStr이 null이 아닐 때 request.getParameter에서 가져옴
  • dao의 select메소드의 매개변수로 넣어줌
  • dao.select의 반환값이 List기 때문에 List타입으로 list객체안에 값을 넣어줌
  • 그 값을 request의 setAttrivute을 써서 list에 저장함

<%
		String findStr = "";
		if(request.getParameter("findStr") != null) {
			findStr = request.getParameter("findStr");
		}
		
		List<ProductVo> list = dao.select(findStr);
		request.setAttribute("list", list);

%>	

 

 

 

 

 

 

• dao에서 select

public List<ProductVo> select(String findStr) {
			List<ProductVo> list = new ArrayList<ProductVo>();
			try {
				
				conn = new Application().getConn();
				
				String sql = "SELECT * FROM product WHERE product_name LIKE ?";
				ps = conn.prepareStatement(sql);
				ps.setString(1, "%" + findStr + "%");
				rs= ps.executeQuery();
				while(rs.next()) {
					ProductVo vo = new ProductVo();
					vo.setProduct_serial(rs.getInt("product_serial"));
					vo.setProduct_name(rs.getString("product_name"));
					vo.setProduct_price(rs.getInt("product_price"));
					vo.setProduct_picture_url(rs.getString("product_picture_url"));
					vo.setProduct_description(rs.getString("product_description"));
					vo.setProduct_link_url(rs.getString("product_link_url"));
					list.add(vo);
				}

			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				try {
					conn.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
			return list;
		}

 

 

 

 

• 검색한 상품나오는 div
  • jstl을 사용해 list의 사이즈를 검색갯수에 넣어줌
  • 검색결과가 없을 때는 '검색결과없음'으로 나오게끔 스크립틀릿삽입
  • jstl forEach문을 사용해 가져온 list들은 vo로 선언하여 루핑
  • 상품가격은 db에 300000이런식으로 저장되지만 보여질때는 300,000식으로 보여져야한다 따라서 jstl의 fmt를 사용해 패턴을 지정해준다

		<div id = "product_list">
		 
         <div class = "product_middle">	
			<div id = "product_total">
				<p>Total&nbsp:&nbsp&nbsp<span>${fn:length(list) }</span></p>
			</div>
		</div>
		<% if(list.isEmpty()) {%>
		검색결과없음
		<%} else {%>
			<c:forEach var = "vo" items = "${list }">
	 			<figure class="product">
	                <img src="${vo.product_picture_url }" width="250px" height="230px" />
	                <figcaption>
	                  <h3>  더 알아보기</h3>
	                  <h5>more detail</h5>
	                </figcaption>
	                <a href="${vo.product_link_url }"></a>
	                <div id="detail">${vo.product_name}</br><fmt:formatNumber value="${vo.product_price }" pattern="#,###" /></div>
				</figure>
			</c:forEach>
			<%} %>
		</div>

 

 

 

 

• 사용된 taglib들

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

 

 

 

 

 

 

 

생각보다 어렵진 않았던 작업이었다

아쉬운점은 시간이 없어서 페이징처리를 못했다는 점