[ HTML ] 목록, 검색 페이지에서 태그를 활용해보기

환경 : DBeaver, Spring Tool Suite4

 

 

(참고) 해당 실습에 사용된 데이터 베이스 코드 :  https://ggingggang05.tistory.com/109

(참고) 해당 실습에 대한 Dto / Dao / Mapper 클래스 코드 및 기타 추가 설정 관련 : https://ggingggang05.tistory.com/110

---

[ 전체 코드 ]

    - ProductController.java

@Controller
@RequestMapping("/product")
public class ProductController {

	@Autowired
	private ProductDao dao;
	
	//목록 및 검색 페이지
//	@RequestMapping(value = "/list", method = RequestMethod.GET)
	@RequestMapping("/list")
	public String list(@RequestParam(required = false) String column,
						@RequestParam(required = false) String keyword, 
						Model model) {
		boolean isSearch = column != null && keyword != null;
		List<ProductDto> list = isSearch ? dao.selectList(column, keyword) : dao.selectList();
/*		List<ProductDto> list;
		if(isSearch) {
			list = dao.selectList(column, keyword);
		} else {
			list = dao.selectList();
		}
*/		
		model.addAttribute("isSearch", isSearch);
		model.addAttribute("list", list); // list를 넘긴다
		return "/WEB-INF/views/Product/list.jsp";
	}
}

 

   - list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%-- <p>는 paragraph --%>
<p>
	제품에 대한 페이지입니다.
</p>

<%-- 페이지 제목 --%>
<c:choose>
	<c:when test="${isSearch}">
		<h1>제품 검색</h1>
	</c:when>
	<c:otherwise>
		<h1>제품 목록</h1>
	</c:otherwise>
</c:choose>

<%-- 검색창 --%>
<form action="list" method="get">
	<select name="column">
		<%-- 
			EL은 문자열도 == 로 비교한다 (물론 equals도 가능)
			EL은 문자열을 쌍따옴표로 쓰건 외따옴표로 쓰건 상관하지 않는다
		 --%>
		<c:choose>
			<c:when test="${param.column == 'product_name'}">
				<option value="product_name" selected>제품명</option>
			</c:when>
			<c:otherwise>
				<option value="product_name">제품명</option>
			</c:otherwise>
		</c:choose>
		<c:choose>
			<c:when test="${param.column == 'product_category'}">
				<option value="product_category" selected>제품 종류</option>
			</c:when>
			<c:otherwise>
				<option value="product_category">제품 종류</option>
			</c:otherwise>
		</c:choose>
		<c:choose>
			<c:when test="${param.column == 'product_price'}">
				<option value="product_price" selected>제품 가격</option>	
			</c:when>
			<c:otherwise>
				<option value="product_price">제품 가격</option>
			</c:otherwise>
		</c:choose>
	</select>
	<%-- value="${param.keyword}" : 검색어 유지 --%>
	<input type="search" name="keyword" placeholder="검색어 입력" required
			value="${param.keyword}">
	<button>검색</button>
</form>

<%-- 목록 출력 --%>
<%-- for(EmpDto dto : list) {} --%>
<table border="1">
	<thead>
		<tr>
        		<th>제품번호</th>
			<th>제품명</th>
			<th>제품종류</th>
			<th>제품가격</th>
			<th>출시일</th>
		</tr>
	</thead>
	<tbody align="center">
		<c:forEach var="dto" items="${list}">
		<tr>
			<td>${dto.productId}</td>
			<td>${dto.productName}</td>
           		<td>${dto.productType}</td>
			<td>${dto.productPrice}원</td>
			<td>${dto.productRealseDate}</td>
		</tr>
		</c:forEach>
	</tbody>
</table>

---

[ 코드 설명 ]

//목록 및 검색 페이지
//	@RequestMapping(value = "/list", method = RequestMethod.GET)
	@RequestMapping("/list")
	public String list(@RequestParam(required = false) String column,
						@RequestParam(required = false) String keyword, 
						Model model) {
		boolean isSearch = column != null && keyword != null;
		List<ProductDto> list = isSearch ? dao.selectList(column, keyword) : dao.selectList();
	
		model.addAttribute("isSearch", isSearch);
		model.addAttribute("list", list); // list를 넘긴다
		return "/WEB-INF/views/Product/list.jsp";
   	 }

     

 (추가) 위의 리스트 조건문을 풀어 쓰면 아래와 같다 (현재 글의 주제와는 관련 없음)

List<ProductDto> list;
if(isSearch) {
	list = dao.selectList(column, keyword);
} else {
	list = dao.selectList();
}

---

   - "제품 검색"과 "제품 목록"을 구분 짓기

model.addAttribute("isSearch", isSearch);

<%-- 페이지 제목 --%>
<c:choose>
	<c:when test="${isSearch}">
		<h1>제품 검색</h1>
	</c:when>
	<c:otherwise>
		<h1>제품 목록</h1>
	</c:otherwise>
</c:choose>

   (+) 리스트를 넘기는 것처럼 model을 매개체로 활용하여 isSearch의 값을 넘긴다.  

         그렇게 ProductController에서 가져온 isSearch의 값을 test속성에서 사용하여 isSearch의 값이

        참이면 "제품 검색",  거짓이면 "제품 목록"을 출력해준다.

---

   - 사원을 검색하고 그 검색결과를 출력할 때 선택한 옵션이 고정되게 설정하기 (페이지 이동에도 선택한 옵션 태그 고정)

<%-- 검색창 --%>
<form action="list" method="get">
	<select name="column">
		<c:choose>
			<c:when test="${param.column == 'product_name'}">
				<option value="product_name" selected>제품명</option>
			</c:when>
			<c:otherwise>
				<option value="product_name">제품명</option>
			</c:otherwise>
		</c:choose>
		<%-- 제품 종류, 제품 가격 생략 --%>
	</select>
    
	<input type="search" name="keyword" placeholder="검색어 입력" required value="${param.keyword}">
	<button>검색</button>
</form>

   (+) EL은 문자열도 '==' 로 비교 (equals도 가능)
   (+) EL은 문자열의 따옴표 모양을 신경쓰지 않음 

        <c:when test="${param.column == 'product_name'}"> 여기선 외부의 쌍따옴표("")와 구분하여 작성하였음

   (+) value="${param.keyword}" : 검색어 유지

   (+) input 태그에 placehodler를 사용하여 입력에 대한 정보를 사용자에게 보여준다

 

   ☆ 인라인으로 위의 코드를 조금 더 간결하게 구현하는 방법은 아래와 같다.

<option value="product_name" ${param.column == 'product_name' ? 'selected' : ''}>제품명</option>

   (+) 삼항연산자를 option 태그 안에서 활용한다.

---

   - 표의 형태로 결과값 출력하기 

<%-- 목록 출력 --%>
<%-- for(EmpDto dto : list) {} --%>
<table border="1">
	<thead>
		<tr>
        		<th>제품번호</th>
			<th>제품명</th>
			<th>제품종류</th>
			<th>제품가격</th>
			<th>출시일</th>
		</tr>
	</thead>
	<tbody align="center">
		<c:forEach var="dto" items="${list}">
		<tr>
			<td>${dto.productId}</td>
			<td>${dto.productName}</td>
           		<td>${dto.productType}</td>
			<td>${dto.productPrice}</td>
			<td>${dto.productRealseDate}</td>
		</tr>
		</c:forEach>
	</tbody>
</table>

    (+) 반복될 표의 형태를  <c:forEach> 태그를 안에 넣어준다.   

 

   (추가) 가격을 출력할 때 형식을 부여하자

<%-- 그냥 데이터 값을 출력--%>
<td>${dto.productPrice}</td>

<%-- 형식을 지정하여 값을 출력--%>
<td align="right">
	<%-- 방법1 --%>
	<fmt:formatNumber value="${dto.productPrice}" pattern="#,##0"></fmt:formatNumber>
    	<%-- 방법2 --%>
	<%--<fmt:formatNumber pattern="#,##0">${dto.productPrice}</fmt:formatNumber> --%>
</td>

   (+) <fmt:formatNumber> 태그를 사용

   (+) pattern 속성을 사용하여 기본 출력 형식을 부여한다. 

   (+) value 속성을 사용하여 fmt 형식을 지정할 변수를 불러온다

---

   - <p> 태그

<%-- <p>는 paragraph, 문단 태그이다. --%>
<p>
	제품에 대한 페이지 입니다.
</p>

    (+) <p> 태그, paragrapht는 문단 태그입니다.

 

 

 

 

 

개인 공부 기록용입니다:)