교재 실습/자바 웹 개발 워크북

116. 동적 SQL의 사용 (3)

Jint 2022. 9. 20. 22:17

2. 프로젝트 목록 페이지에 정렬 링크 추가

프로젝트 목록에서 정렬을 바꿀 수 있게 각 컬럼의 헤더에 정렬 링크를 추가한다.

webapp/project 폴더의 ProjectList.jsp 파일을 열고 다음과 같이 테이블 컬럼의 헤더에 정렬 링크를 추가한다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로젝트 목록</title>
</head>
<body>
<jsp:include page="/Header.jsp"/>
<h1>프로젝트 목록</h1>
<p><a href='add.do'>신규 프로젝트</a></p>
<table border="1">
<tr>
	<th><c:choose>
		<c:when test="${orderCond == 'PNO_ASC'}">
			<a href="list.do?orderCond=PNO_DESC">번호↑</a>
		</c:when>
		<c:when test="${orderCond == 'PNO_DESC'}">
			<a href="list.do?orderCond=PNO_ASC">번호↓</a>
		</c:when>
		<c:otherwise>
			<a href="list.do?orderCond=PNO_ASC">번호︎</a>
		</c:otherwise>
	</c:choose></th>
	<th><c:choose>
		<c:when test="${orderCond == 'TITLE_ASC'}">
			<a href="list.do?orderCond=TITLE_DESC">제목↑</a>
		</c:when>
		<c:when test="${orderCond == 'TITLE_DESC'}">
			<a href="list.do?orderCond=TITLE_ASC">제목↓</a>
		</c:when>
		<c:otherwise>
			<a href="list.do?orderCond=TITLE_ASC">제목︎</a>
		</c:otherwise>
	</c:choose></th>
	<th><c:choose>
		<c:when test="${orderCond == 'STARTDATE_ASC'}">
			<a href="list.do?orderCond=STARTDATE_DESC">시작일↑</a>
		</c:when>
		<c:when test="${orderCond == 'STARTDATE_DESC'}">
			<a href="list.do?orderCond=STARTDATE_ASC">시작일↓</a>
		</c:when>
		<c:otherwise>
			<a href="list.do?orderCond=STARTDATE_ASC">시작일</a>
		</c:otherwise>
	</c:choose></th>
	<th><c:choose>
		<c:when test="${orderCond == 'ENDDATE_ASC'}">
			<a href="list.do?orderCond=ENDDATE_DESC">종료일↑</a>
		</c:when>
		<c:when test="${orderCond == 'ENDDATE_DESC'}">
			<a href="list.do?orderCond=ENDDATE_ASC">종료일↓</a>
		</c:when>
		<c:otherwise>
			<a href="list.do?orderCond=ENDDATE_ASC">종료일</a>
		</c:otherwise>
	</c:choose></th>
	<th><c:choose>
		<c:when test="${orderCond == 'STATE_ASC'}">
			<a href="list.do?orderCond=STATE_DESC">상태↑</a>
		</c:when>
		<c:when test="${orderCond == 'STATE_DESC'}">
			<a href="list.do?orderCond=STATE_ASC">상태↓</a>
		</c:when>
		<c:otherwise>
			<a href="list.do?orderCond=STATE_ASC">상태</a>
		</c:otherwise>
	</c:choose></th>
	<th></th>
</tr>
	<c:forEach var="project" items="${projects}">
		<tr> 
			<td>${project.no}</td>
			<td><a href='update.do?no=${project.no}'>${project.title}</a></td>
			<td>${project.startDate}</td>
			<td>${project.endDate}</td>
			<td>${project.state}</td>
			<td><a href='delete.do?no=${project.no}'>[삭제]</a></td>
		</tr>
	</c:forEach>
</table>
<jsp:include page="/Tail.jsp"/>
</body>
</html>

 

- 이전의 컬럼 헤더

이전 JSP 소스에서는 컬럼 헤더를 다음과 같이 일반 텍스트로 출력하였다.

<tr>
    <th>번호</th>
    <th>제목</th>
    <th>시작일</th>
    <th>종료일</th>
    <th>상태</th>
    <th></th>
</tr>

 

- 정렬 링크가 걸린 컬럼 헤더

변경된 소스를 보면 컬럼 헤더에 링크를 걸었다. 즉 컬럼 헤더를 클릭했을 때 해당 컬럼에 대해 오름차순 또는 내림차순으로 프로젝트 목록을 정렬하게 만들었다. 그중에서 프로젝트 제목에 걸어 놓은 링크를 살펴본다.

<th><c:choose>
    <c:when test="${orderCond == 'TITLE_ASC'}">
        <a href="list.do?orderCond=TITLE_DESC">제목↑</a>
    </c:when>
    <c:when test="${orderCond == 'TITLE_DESC'}">
        <a href="list.do?orderCond=TITLE_ASC">제목↓</a>
    </c:when>
    <c:otherwise>
        <a href="list.do?orderCond=TITLE_ASC">제목︎</a>
    </c:otherwise>
</c:choose></th>

매개변수 'orderCond'의 값이 'TITLE_ASC'이면 오름차순으로 정렬하라는 요청이기 때문에 컬럼 헤더는 '제목↑'이 출력된다. 이 상태에서 링크를 클릭하면 내림차순으로 정렬해야 하기 때문에 <a> 태그의 URL은 'list.do?orderCond=TITLE_DESC'이 된다. 매개변수 값 'TITLE_DESC'는 프로젝트 제목에 대해 내림차순으로 정렬하라는 의미이다. 즉 오르차순일 때 컬럼 헤더를 클릭하면 내림차순으로 정렬하고, 반대로 내림차순일 때 컬럼 헤더를 클릭하면 오름차순으로 정렬한다.

프로젝트 제목에 대한 정렬 요청이 없으면 <c:otherwise> 태그의 내용이 출력된다. 즉 컬럼 헤더로 '제목'을 출력한다. 이 상태에서 링크를 클릭하면 프로젝트 제목에 대해 오름차순으로 정렬할 것을 서버에 요청한다.

 

참고도서 : https://freelec.co.kr/book/1674/

 

[열혈강의] 자바 웹 개발 워크북

[열혈강의] 자바 웹 개발 워크북

freelec.co.kr