58강 - View 페이지 은닉하기
View는 이제 더 이상 사용자가 직접 요청하면 안되는 페이지이다.
View는 반드시 Controller를 통해서 실행해야한다.(View에서 실행하는 습관은 X)
==> View 단을 사용자가 직접 요청 할 수 없는 곳에 두는게 바람직하다.
어떻게 하면 직접 요청할 수 없는 곳에 둘 수 있나?
WEB-INF 디렉토리는 외부에 서비스 되지 않는 파일들이 들어있다.(설정파일, 라이브러리, 코드파일 등..)
==> 따라서 WEB-INF 디렉토리에 넣어서 View를 관리하면 된다.
59강 - View에서 흐름 제어를 위한 자바 코드 블럭 제거하기
[list.jsp] 파일 내에 자바 코드를 제거 해야한다.
========================= 자바코드 제거 전 =========================
<%
List<Notice> list = (List<Notice>)request.getAttribute("list")
for(Notice n : list) { //EL표기법으로사용하여면저장소에있어야쓸수있다.
pageContext.setAttribute("n", n); //n.title 이라는EL표기법으로사용하기위해서리스트에뽑아낸notice객체를
// 저장소에n으로넣어준다.
%>
<tr>
<td>${n.id}</td>
<td class="title indent text-align-left"><a href="detail?id=${n.id}">${n.title}</a></td>
<td>${n.writerId}</td>
<td>${n.regdate}</td>
<td>${n.hit}</td>
</tr>
<%} %>
========================= 자바코드 제거 전 =========================
태그를 이용해서 제어구조를 나타낸다.
ex.) <forEach> </forEach>
[태그 사용방법]
1. 태그를 사용하려면 라이브러리를 다운받아야한다. ==> JSTL 다운로드
( https://mvnrepository.com/artifact/javax.servlet/jstl/1.2 )
2. jstl1.2.jar 파일을 WEB-INF의 lib폴더에 복사 붙여넣기 해준다.
3. 태그라이브러리를 사용하기 위해 맨위에 <% taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" /> 설정
(※주의! uri에 /jsp/가 들어가 있어야한다.)
4. 접두사 "c:"를 찍어보면 사용할 수 있는 태그들이 보인다.
사용 ex)
<c:forEach var="n" items="${list}">
<tr>
<td>${n.id}</td>
<td class="title indent text-align-left"><a href="detail?id=${n.id}">${n.title}</a></td>
<td>${n.writerId}</td>
<td>${n.regdate}</td>
<td>${n.hit}</td>
</tr>
</c:forEach>
<c:forEach var="n" items="${list}"> 의 해석
① c:forEach - JSTL의 라이브러리 중 forEach를 사용하려면 c:forEach (접두사 c로 설정했기에)
(== for(Notice n : list))
② items="${list}" - request 저장소에 있는 list를 가져
(== List<Notice> list = (List<Notice>)request.getAttribute("list"))온다.
③ var = "n" - 반복될때마다 가져온 list의 notice객체를 저장소에 n으로 넣어준다.
(데이터를 꺼내서 쓸때 EL표기법으로 쓰기 위해서이다.)
(== pageContext.setAttribute("n", n); )
[정리]
저장소에 list를 꺼내와서 반복작업하면서 list에 있는 데이터를 n으로 받아주어서 사용한다.
60강 - JSTL(JSP Standard Tag Library)
JSTL 기능의 범주(5가지)
1. Core - 제어의 행위를 담당
2. Formating - 숫자, 날짜를 format 하는 담당
3. Functions - EL을 사용해서 데이터를 가져오는데 가져온 문자열을 쪼개거나, 소문자에서 대문자로 쓰는 등에
문자열의 조작이 필요할때 사용하는 함수들의 묶음
4. SQL과 5.MXL은 과거에 MVC 방법론이 나오기 전에 사용했던 기능, View에서 모든 로직을 짜야했을때 사용했었다.
=> 현재는 코드의 구성이 깨짐으로 사용하지 않는게 바람직하다.
1. Core - 제어의 행위를 담당
URI를 이용해서 라이브러리를 호출하고 접두사를 명시해줌으로써 JSTL태그를 사용한다.
왜 접두사를 사용해야할까?
Jasper은 HTML태그인지 JSTL태그인지 구분을 못하기 때문이다.
Jasper가 HTML 태그가 아닌 "행위를 담당하는 태그"라는 것을 알려주기 위해서이다.
강의 61 - 중간 요약 정리
강의 62 - forEach의 속성 사용하기
forEach 태그의 begin속성과 end 속성
ex. 5개 반복문 수행
<c:forEach var="n" items="${list}" begin="0" end="4">
ex. 인덱스 1부터 3까지의 반복문
<c:forEach var="n" items="${list}" begin="1" end="3">
* begin과 end에 들어가는 value는 list를 반복할때 사용하는 index의 값이다. (index는 0부터 시작)
반복할때 사용하는 index의 값은 어떻게 얻을 수 있나요?
==> varStatus의 index 속성을 활용한다.
* varStatus 속성: forEach문이 반복할때 관리되는 상태 값을 사용할 수 있게 하는 속성
forEach의 상태객체에 변수명 st로 설정(varStatus="st")하면 그 변수명을 통해서 다음처럼 상태 값을 이용할 수 있다.
${st.current} : 현재 반복되는 아이템(객체, 숫자, 문자열)
(ex. 지금 프로젝트에서는 list의 아이템이 notice객체임으로 현재 반복하면서 추출된 notice객체가 나온다.)
${st.index} : 현재 반복되는 반복 인덱스(0부터 시작함)
${st.count} : 현재 반복 횟수
${st.first} : 현재 아이템이 첫번째 아이템인지를 알려줌(반환값: true 또는 false)
${st.last} : 현재 아이템이 마지막 아이템인지 알려줌(반환값: true 또는 false)
${st.begin} : begin 속성에 설정한 값
${st.end} : end 속성에 설정한 값
${st.step} : 반복되는 인덱스의 증가치(step을 2로 하면 index가 2씩 증가하면서 반복함)
ex.
<c:forEach var="n" items="${list}" varStatus="st">
${n}
count: ${st.count}
begin: ${st.begin}
first: ${st.first}
last: ${st.last}
step: ${st.step}
</c:forEach>
63강 - JSTL로 Pager 번호 만들기
반복문을 활용해서 pager 번호 생성
<ul class="-list- center">
<c:forEach var="i" begin="0" end="4">
<li><a class="-text- orange bold" href="?p=${1+i}&t=&q=" >${1+i}</a></li>
</c:forEach>
</ul>
문제점 발생!!!! Pager가 7(?p=7)일떄도 pager은 1부터5를 출력한다.
pager의 번호를 눌렀을때 해당되는 영역의 pager값이 나오게 해야한다.
현재 page번호의 해당 영역을 구하려면 page에 startNum을 구해야한다.
startNum은 현재 page를 5로 나눈 나머지값의 -1한 값을 page에서 빼주면 된다.
==> startNum = page - (page-1)%5;
시작번호를 구하고 EL표기법으로 꺼내서 사용하려면 단순 코드블럭의 지역변수가 아닌
저장소 pageContext에 저장해야한다.
<c:set /> 태그를 이용해서 임시변수를 만들어준다.
==> <c:set var="startNum" value="${page-(page-1)%5}" />
위에서 쓴 page 변수는 어디서 가져오는가?
~> <c:set /> 태그를 이용해서 파리미터로 넘어온 p값을page임시변수를 만든다.
==> <c:set var="page" value="${(empty param.p == null)?1:param.p}"/>
* (empty param.p == null)?1:param.p 으로 한 이유?
처음 페이지를 요청했을때의 uri는 "http://localhost:8080/notice/list" 임으로 param(파라미터)로 넘어오는 값이 없다.
따라서 처음 페이지를 요청했을때는 파라미터 값이 null임으로 null일때 page가 1로 설정해준다.
64강 - JSTL로 이전/다음 Pager 링크 만들기
① [다음]번호 만들기
다음 버튼의 page값을 startNum보다 +5 값을 해야 startNum이 1일때 다음페이지 값이 6이 됨으로써
다음버튼을 눌렀을때 6부터 10이 출력된다.
<a href="?p=${startNum+5}&t=&q=" class="btn btn-next">다음</a>
* 조건문 태그 <c:if test="조건식"> </c:if> 를 활용!!
<c:if test="${startNum+5<lastNum}">
<a href="?p=${startNum+5}&t=&q=" class="btn btn-next">다음</a>
</c:if>
<c:if test="${startNum+5>=lastNum}">
<span class="btn btn-next" onclick="alert('다음페이지가없습니다.');">다음</span>
</c:if>
② [이전]번호 만들기
startNum이 1보다 작으면 "이전페이지가 없음"의 표시가 떠야한다.
startNum이 1보다 클때 값을 출력해줘야한다.
<c:if test="${startNum>1}">
<a href="?p=${startNum-1}&t=&q=" class="btn btn-prev">이전</a>
</c:if>
<c:if test="${startNum <= 1}">
<span class="btn btn-prev" onclick="alert('이전페이지가없습니다.');">이전</span>
</c:if>
65강 - JSTL:forTokens로 첨부파일 목록 출력하기
첨부파일을 서버로 올릴때, 파일 목록을 컬럼 하나를 쉼표단위로 구분한다.
==> 서버에 있는 파일 목록을 View에서는 어떻게 출력할까?
<c:forTokens items="" delims=""> </c:forTokens> 태그 이용!
* 옵션 설명
items : 구분자로 끊어서 사용할 문자열 값
delims : 구분자 설정값
ex.
<c:forTokens var="fileName" items="${n.files}" delims=",">
해석: n.files의 문자열 값을 가져와서 "," 콤마 단위로 끊고 변수 fileName에 넣어주는 작업을 반복
==> test.zip,aa.gif,bb.png 인 문자열을 test.zip aa.gif bb.png 로 끊어주어 반복적으로 fileName에 넣어준다.
ex. DB 첨부파일의 내용을 "," 콤마 단위로 추출해서 나열한다.
<td colspan="3" style="text-align: left text-indent: 10px">
<c:forTokens var="fileName" items="${n.files}" delims=",">
<a href="${n.files}">${fileName}</a>
</c:forTokens>
</td>
ex. DB에 있는 첨부파일의 내용을 "," 콤마 단위로 추출해서 나열한다
+ 각 첨부파일 간에 구분자 "/" 붙여준다.(마지막은 생략)
<th>첨부파일</th>
<td colspan="3" style="text-align: left text-indent: 10px">
<c:forTokens var="fileName" items="${n.files}" delims="," varStatus="st">
<a href="${n.files}">${fileName}</a>
<c:if test="${!st.last}">
/
</c:if>
</c:forTokens>
</td>
66강 - JSTL:format 태그로 날짜 형식 변경하기
JSTL 의 format 라이브러리를 가져와서 쓰려면 상단에
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
을 입력해주어야 한다.
<fmt:formatDate pattern="" value="" /> 태그
- formatDate: 날짜 정보를 담고 있는 객체를 포맷팅하여 출력할 때 사용한다.
- value: 날짜 데이터를 가지고 있는 값을 넣어준다.
- pattern: 날짜 형식을 지정한다.
ex.
<fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${n.regdate}" />
* 왜 날짜 월을 표현할때 대문자 MM으로 쓰는가?
==> 시간에서 분을 표현할때 소문자 mm을 쓰기 때문에 날짜 월을 표현할때는 대문자 MM을 사용한다.
67강 - JSTL:format 태그로 숫자 형식 변경하기
숫자 형식 지정하려면 <fmt:formatNumber value="" /> 태그를 사용해야한다.
ex. 조회수 숫자 형식 변형하기
<fmt:formatNumber value="${n.hit}" />
결과: 123456789 ==> 123,456,789
68강 - JSTL:functions로 EL에서 함수 이용하기
가끔 문서 내에서 문자열을 조작할 수 있는 함수가 필요할때 어떻게 해야하나?
맨위에 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 추가
사용방법: EL표기법 안에 "fn:함수명" 으로 사용한다.
ex. 파일명을 모두 대문자로 바꾸고 싶을때
<a href="${n.files}">${fn:toUpperCase(fileName)}</a>
ex. 파일명에 .zip 파일인 경우 폰트를 bold, 폰트 색상을 red로 설정하고 싶을때
<td colspan="3" style="text-align: left text-indent: 10px">
<c:forTokens var="fileName" items="${n.files}" delims="," varStatus="st">
<c:set var="style" value="" />
<c:if test="${fn:endsWith(fileName, '.zip')}"> //fileName이 .zip파일로 끝나는지 조건탐색
<c:set var="style" value="font-weight: bold; color:red;" /> //style변수에 css값 적용하는 데이터 삽입
</c:if>
<a href="${n.files}" style="${style}">${fn:toUpperCase(fileName)}</a>
<c:if test="${!st.last}">
/
</c:if>
</c:forTokens>
</td>
[출처]
뉴렉쳐
www.youtube.com/watch?v=u6-D8CJbsmo&list=PLq8wAnVUcTFVOtENMsujSgtv2TOsMy8zd&index=14
'Servlet&JSP 프로그래밍' 카테고리의 다른 글
| 뉴렉처[Servlet/JSP] 강의 복습 75강~84강 (0) | 2021.02.05 |
|---|---|
| 뉴렉처[Servlet/JSP] 강의 복습 69강~74강 (0) | 2021.01.16 |
| 뉴렉처[Servlet/JSP] 강의 복습 51강~57강 (0) | 2021.01.14 |
| 뉴렉처[Servlet/JSP] 강의 복습 34강~50강 (0) | 2021.01.11 |
| 뉴렉처[Servlet/JSP] 강의 복습 28강~33강 (0) | 2021.01.08 |
