42일차(2)/JSTL(2) : java 코드로 작성된 페이지 JSTL로 작성하기
- java code로 작성된 페이지를 EL, JSTL을 사용해 재작성해보기
index - 원본, java 코드 사용
<%
//session scope에 id라는 키값으로 저장된 값이 있는지 읽어와 본다.(없으면 null)
String id=(String)session.getAttribute("id");
%>
<!-- ... -->
<ul>
<%if(id != null) {%>
<%-- 회원정보 보기 --%>
<li>
<a href="${pageContext.request.contextPath }/users/private/info.jsp">
회원정보보기
</a>
</li>
<%-- 로그아웃 버튼 --%>
<li>
<a href="${pageContext.request.contextPath }/users/logout.jsp">
로그아웃
</a>
</li>
<%}else{ %>
<%-- 회원 가입하기 --%>
<li>
<a href="${pageContext.request.contextPath }/users/signup_form.jsp">
회원가입
</a>
</li>
<%-- 회원 로그인하기 --%>
<li class="nav-item">
<a href="${pageContext.request.contextPath }/users/loginform.jsp">
로그인
</a>
</li>
<%} %>
</ul>
index - JSTL, EL을 사용한 수정본
<%--
1. sessionScope.id != null
2. id != null
3. id ne null
4. not empty id
- el에서 1,2,3,4는 모두 같은 결과이다.
--%>
<c:choose>
<c:when test="${not empty id}">
<p>
<a href="${pageContext.request.contextPath }/users/private/info.jsp">회원정보보기</a>
<a href="${pageContext.request.contextPath }/users/logout.jsp">로그아웃</a>
</p>
</c:when>
<c:otherwise>
<p>
<a href="${pageContext.request.contextPath }/users/signup_form.jsp">회원가입 </a>
<a href="${pageContext.request.contextPath }/users/loginform.jsp">로그인</a>
</p>
</c:otherwise>
</c:choose>
- 셋 다 대체 가능하다.
- empty 연산자는 비어있는지 여부를 알 수 있다.
→ 위와 같이 작성하면 id라는 키값으로 session영역의 값이 비어있는지 아닌지 알 수 있다.
1. sessionScope.id != null
2. id != null
3. id ne null
4. not empty id
전부 같다!
- 위의 <% %> java 영역 없이 EL만으로도 session영역의 값을 가져올 수 있다.
list - 원본, java 코드 사용
<%@page import="test.cafe.dto.CafeDto"%>
<%@page import="test.cafe.dao.CafeDao"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//한 페이지에 몇개씩 표시한 것인지
final int PAGE_ROW_COUNT=5;
//하단 페이지를 몇개씩 표시할 것인지
final int PAGE_DISPLAY_COUNT=5;
//보여줄 페이지의 번호를 일단 1이라고 초기값 지정
int pageNum=1;
//페이지 번호가 파라미터로 전달되는지 읽어와 본다.
String strPageNum=request.getParameter("pageNum");
//만일 페이지 번호가 파라미터로 넘어온다면
if(strPageNum != null){
//숫자로 바꿔서 보여줄 페이지 번호로 지정한다.
pageNum=Integer.parseInt(strPageNum);
}
//보여줄 페이지의 시작 ROWNUM
int startRowNum=1+(pageNum-1)*PAGE_ROW_COUNT;
//보여줄 페이지의 끝 ROWNUM
int endRowNum=pageNum*PAGE_ROW_COUNT;
//하단 시작 페이지 번호
int startPageNum=1+((pageNum-1)/PAGE_DISPLAY_COUNT)*PAGE_DISPLAY_COUNT;
//하단 끝 페이지 번호
int endPageNum=startPageNum+PAGE_DISPLAY_COUNT-1;
//전체 글의 갯수
int totalRow=CafeDao.getInstance().getCount();
//전체 페이지의 갯수 구하기
int totalPageCount=(int)Math.ceil(totalRow/(double)PAGE_ROW_COUNT);
//끝 페이지번호가 이미 전체 페이지 갯수보다 크게 계산되었다면 잘못된 값이다.
if(endPageNum>totalPageCount){
endPageNum=totalPageCount; //끝 페이지번호 값을 보정해준다.
}
//CafeDto 객체를 생성해서
CafeDto dto=new CafeDto();
//위에서 계산된 startRowNum, endRowNum을 담고
dto.setStartNum(startRowNum);
dto.setEndRowNum(endRowNum);
//CafeDto를 인자로 전달해서 글목록 얻어오기
List<CafeDto> list=CafeDao.getInstance().getList(dto);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/cafe/list.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<style>
.link{
text-decoration-line: none;
}
</style>
</head>
<body>
<jsp:include page="/include/navbar.jsp">
<jsp:param value="cafe" name="thisPage"/>
</jsp:include>
<div class="container">
<a href="${pageContext.request.contextPath }/cafe/private/insertform.jsp" class="btn btn-outline-info" style="margin: 20px 0px 20px;">새글 작성</a>
<h3 style="margin: 0px 0px 10px; border-bottom:3px solid #0dcaf0; padding:5px 0px 5px;">카페 글 목록입니다.</h3>
<table class="table">
<thead class="table-info text-center">
<tr>
<th>글번호</th>
<th>작성자</th>
<th>제목</th>
<th>조회수</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<%for(CafeDto tmp:list) {%>
<tr class="text-center">
<td><%=tmp.getNum() %></td>
<td><%=tmp.getWriter() %></td>
<td>
<a class="link" href="detail.jsp?num=<%=tmp.getNum() %>"><%=tmp.getTitle() %></a>
</td>
<td><%=tmp.getViewCount() %></td>
<td><%=tmp.getRegdate() %></td>
</tr>
<%} %>
</tbody>
</table>
<nav>
<ul class="pagination justify-content-center">
<%if(startPageNum !=1) {%>
<li class="page-item">
<a class="page-link" href="list.jsp?pageNum=<%=startPageNum-1%>">Prev</a>
</li>
<%} %>
<%for(int i=startPageNum; i<=endPageNum; i++) {%>
<li class="page-item <%=pageNum == i ? "active" : "" %>">
<a class="page-link" href="list.jsp?pageNum=<%=i %>"><%=i %></a>
</li>
<%} %>
<%-- 마지막 페이지 번호가 전체 페이지의 갯수보다 작으면 Next링크를 제공한다. --%>
<%if(endPageNum< totalPageCount) {%>
<li class="page-item">
<a class="page-link" href="list.jsp?pageNum=<%=endPageNum+1%>">Next</a>
</li>
<%} %>
</ul>
</nav>
</div>
<jsp:include page="/include/footer.jsp"></jsp:include>
</body>
</html>
list2 - EL, JSTL로 수정하기
<%@page import="test.cafe.dto.CafeDto"%>
<%@page import="test.cafe.dao.CafeDao"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
//한 페이지에 몇개씩 표시한 것인지
final int PAGE_ROW_COUNT=5;
//하단 페이지를 몇개씩 표시할 것인지
final int PAGE_DISPLAY_COUNT=5;
//보여줄 페이지의 번호를 일단 1이라고 초기값 지정
int pageNum=1;
//페이지 번호가 파라미터로 전달되는지 읽어와 본다.
String strPageNum=request.getParameter("pageNum");
//만일 페이지 번호가 파라미터로 넘어온다면
if(strPageNum != null){
//숫자로 바꿔서 보여줄 페이지 번호로 지정한다.
pageNum=Integer.parseInt(strPageNum);
}
//보여줄 페이지의 시작 ROWNUM
int startRowNum=1+(pageNum-1)*PAGE_ROW_COUNT;
//보여줄 페이지의 끝 ROWNUM
int endRowNum=pageNum*PAGE_ROW_COUNT;
//하단 시작 페이지 번호
int startPageNum=1+((pageNum-1)/PAGE_DISPLAY_COUNT)*PAGE_DISPLAY_COUNT;
//하단 끝 페이지 번호
int endPageNum=startPageNum+PAGE_DISPLAY_COUNT-1;
//전체 글의 갯수
int totalRow=CafeDao.getInstance().getCount();
//전체 페이지의 갯수 구하기
int totalPageCount=(int)Math.ceil(totalRow/(double)PAGE_ROW_COUNT);
//끝 페이지번호가 이미 전체 페이지 갯수보다 크게 계산되었다면 잘못된 값이다.
if(endPageNum>totalPageCount){
endPageNum=totalPageCount; //끝 페이지번호 값을 보정해준다.
}
//CafeDto 객체를 생성해서
CafeDto dto=new CafeDto();
//위에서 계산된 startRowNum, endRowNum을 담고
dto.setStartNum(startRowNum);
dto.setEndRowNum(endRowNum);
//CafeDto를 인자로 전달해서 글목록 얻어오기
List<CafeDto> list=CafeDao.getInstance().getList(dto);
//JSTL+EL을 테스트하기 위해서 필요한 값을 request scope에 담기
//list라는 키값으로 request scope에 담기
request.setAttribute("list", list);
//페이징 처리에 필요한 값을 request scope에 담기
request.setAttribute("pageNum", pageNum);
request.setAttribute("startPageNum", startPageNum);
request.setAttribute("endPageNum", endPageNum);
request.setAttribute("totalPageCount", totalPageCount);
//아래의 jsp 페이지에서 java code를 모두 EL와 JSTL를 활용한 코드로 바꾸어보세요.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/cafe/list2.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<style>
.link{
text-decoration-line: none;
}
</style>
</head>
<body>
<jsp:include page="/include/navbar.jsp">
<jsp:param value="cafe" name="thisPage"/>
</jsp:include>
<div class="container">
<a href="${pageContext.request.contextPath }/cafe/private/insertform.jsp" class="btn btn-outline-info" style="margin: 20px 0px 20px;">새글 작성</a>
<h3 style="margin: 0px 0px 10px; border-bottom:3px solid #0dcaf0; padding:5px 0px 5px;">카페 글 목록입니다.</h3>
<table class="table">
<thead class="table-info text-center">
<tr>
<th>글번호</th>
<th>작성자</th>
<th>제목</th>
<th>조회수</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<c:forEach var="tmp" items="${list }">
<tr class="text-center">
<td>${tmp.num }</td>
<td>${tmp.writer }</td>
<td>
<a class="link" href="detail.jsp?num=${tmp.num}">${ tmp.title}</a>
</td>
<td>${tmp.viewCount }</td>
<td>${tmp.regdate}</td>
</tr>
</c:forEach>
</tbody>
</table>
<nav>
<ul class="pagination justify-content-center">
<%-- startPageNum이 1이 아닌 경우에만 Prev링크를 제공한다. --%>
<c:if test="${startPageNum ne 1 }">
<li class="page-item">
<a class="page-link" href="list.jsp?pageNum=${startPageNum-1 }">Prev</a>
</li>
</c:if>
<c:forEach var="i" begin="${startPageNum }" end="${endPageNum}">
<li class="page-item ${pageNum == i ? 'active' : '' }">
<a class="page-link" href="list.jsp?pageNum=${i}">${i}</a>
</li>
</c:forEach>
<%-- 마지막 페이지 번호가 전체 페이지의 갯수보다 작으면 Next링크를 제공한다. --%>
<c:if test="${endPageNum lt totalPageCount }">
<li class="page-item">
<a class="page-link" href="list.jsp?pageNum=${endPageNum+1}">Next</a>
</li>
</c:if>
</ul>
</nav>
</div>
<jsp:include page="/include/footer.jsp"></jsp:include>
</body>
</html>
- request에 담긴 값을 가져올 때 어떤 타입이 담겨있는지를 기억하기!
- List<> 는 제너릭<> 안의 타입이 중요하다.
- ${ } 에 필드명만 적어주면 된다.
- 박스 안이 박스 아래와 비교해서 훨씬 간단하게 작성할 수 있다.
- 단, request 영역에 필요한 내용이 담겨있다는 가정 하에! 사용 가능하다.
- <c:if> 를사용해서 if문 재작성하기
- ne : not equal , !=
- startPageNum이 i와 같으면 class=" " 안에 active를 출력하기.
- ' ' 싱글 따옴표로 해도 된다.
- EL에서도 3항연산자 사용 가능!
- lt : < 연산자와 같은 의미!
- 응답에 필요한 데이터만 request 영역에 잘 들어있다면,
java코드를 없애고 EL와 JSTL로만 작성할 수 있다.
- JSTL을 사용해서 웹페이지에 navbar 적용하기
- WEB-INF 안에 include 폴더를 만들고 안에 navbar.jsp 넣기.
- include는 서버 안에서 페이지 이동하는 것이 아니다. 클라이언트와는 상관없다.
그래서 WEB-INF폴더 안에 있는 파일도 include하여 사용가능
- forward 이동시에도 동일하게 WEB-INF폴더 사용 가능.
<jsp:include page="/WEB-INF/include/navbar.jsp">
<jsp:param value="file" name="thisPage"/>
</jsp:include>- 웹페이지 안에 jsp:include 코드를 추가하는 것만으로도 navbar 가 적용될 수 있다.
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
- 이 코드는 navbar.jsp에만 있어도 include하는 다른 페이지에도 적용된다.
- jsp:param value: 는 thisPage라는 파라미터명으로 cafe를 전달하는 것과 같다.
- 이런 형태로 작성해주기. class에 active를 사용하기 위해 이렇게 value값을 작성해준 것!
** active 적용을 위해 각각 다르게 적용된 내용 비교!
- index.jsp
<jsp:include page="/WEB-INF/include/navbar.jsp" /> ← value 값이 들어갈 필요가 없다. 닫아줌.
- cafe/list.jsp
<jsp:include page="/WEB-INF/include/navbar.jsp">
<jsp:param value="cafe" name="thisPage"/>
</jsp:include>
- file/list.jsp
<jsp:include page="/WEB-INF/include/navbar.jsp">
<jsp:param value="file" name="thisPage"/>
</jsp:include>
'국비교육(22-23)' 카테고리의 다른 글
| 43일차(1)/React(2) : React App 생성, React 기초 (1) | 2022.12.07 |
|---|---|
| 42일차(3)/React(1) : Node.js 초기 세팅, 주요 개념 정리 (0) | 2022.12.06 |
| 42일차(1)/JSTL(1) : JSTL 사용법, 작성법 (1) | 2022.12.06 |
| 41일차(1)/GitHub : 외부 저장소에서 Fork-Clone 하기 / Pull Request 사용법 (0) | 2022.12.05 |
| 40일차(1) : Vue.js 예제(4) (0) | 2022.12.04 |