14.7 Core 태그 라이브러리 실습 예제
로그인 예제
569p
[ login.jsp ]
로그인창, id와 pwd 입력받음
[ result.jsp ]
로그인창에서 id를 입력한 경우와 입력하지 않은 경우를 <c:if> 태그를 이용해 각 다른 화면을 출력하도록함
<body>
<c:if test="${ empty param.userID }" > // empty 연산자로 id가 null이나 빈문자열인지 체크
아이디를 입력하세요
<a href="login.jsp">로그인창</a>
</c:if>
<c:if test="${ not empty param.userID }">// id를 정상입력 했다면
<h1>환영합니다. <c:out value="${ param.userID }" />님</h1>
</c:if>
</body>
[ result2.jsp ]
이번에는 이중조건문을 구현하여 admin으로 로그인 시 관리자 화면을 출력하도록 해보자
...
<c:if test="${ empty param.userID }" >
아이디를 입력하세요
<a href="login.jsp">로그인창</a>
</c:if>
<c:if test="${ not empty param.userID }"> // id를 정상입력하여 로그인했는데
<c:if test="${ param.userID == 'admin' }" > // 그 아이디가 admin이면
<input .../> // 회원정보 수정, 삭제 등 버튼이 화면에 출력되도록 함
</c:if>
<c:if test="${ param.userID != 'admin' }"> // 입력한 id가 admin이 아니면
<h1> ... // 회원 아이디와 기본멘트 출력되도록함
</c:if>
</c:if>
학점 변환기 예제
573p
시험점수 입력->학점으로 변환해주는 프로그램.
[ scoreTest.jsp ]
학점으로 변환할 시험점수를 입력받아 scoreResult1.jsp 로 전송함
form 태그 이용
[ scoreResult1.jsp ]
조건이 여러개이므로 <c:choose> 를 사용함
<body>
<c:set var="score" value="${ param.score }" />
... // 입력받은 시험점수(score) 출력
<c:choose>
<c:when test="${ score >= 90 && score <= 100 }"
<h1>A학점입니다</h1>
</c:when>
<c:when ...> // D 학점까지 반복함
<c:otherwise>
<h1>F학점입니다</h1>
</c:otherwise>
</c:choose>
</body>
[ scoreResult2.jsp ]
입력한 시험점수가 0~100점 사이인지 유효성 검사하는 기능 추가
위에서 <c:when>으로 점수구간 나누는 부분을 모두 묶어서 <c:when test=" score >= 0 && score <= 100" >밑에 넣음
구구단 출력 예제
576p
[ gugu.jsp ]
구구단 단수를 입력받아 guguResult1.jsp로 전송함
[ guguResult1.jsp ]
전송된 단수를 가져와서 <c:forEach> 태그로 <tr>태그에 연속적으로 구구단 출력하도록함
<body>
<c:set var="dan" value="${ param.dan }" />
...
<c:forEach var="i" start="1" end="9" step="1">
<tr align="center">
<td width="400">
<c:out value="${ dan }" /> * <c:out value="${ i }" />
</td>
<td width="400">
<c:out value="${ i * dan }" />
</td>
</tr>
</c:forEach>
...
[ guguResult2.jsp ]
<c:if> 태그를 이용해 각 행의 배경색을 교대로 출력하도록.
<c:forEach var="i" start="1" end="9" step="1">
<c:if test="${ i % 2 == 0 }" > // 짝수행이면
<tr align="center" bgcolor="~~">
</c:if>
<c:if test="${ i % 2 == 1 }">
<tr align="center" bgcolor="!!!">
</c:if>
... // <td>로 구구단 결과 출력
</c:forEach>
이미지 리스트 출력 예제
579p
<c:forEach>를 이용해 여러가지 이미지와 체크박스를 연속적으로 출력하는 프로그램을 만들어보자
[ imageList.jsp ]
<body>
<ul class="lst_type">
<li>
... // 출력할 리스트의 헤드를 만듦
</li>
<c:forEach var="i" begin="1" end="9" step="1"> // 항목 총 9줄 띄움
<li>
<a href='#' style='~~~' >
<img scr='../image/duke.png' ... /></a> // 이미지 띄우고
<a href='#' ~~~>~~</a> // 이미지 이름 출력
<a href='#'>~~~</a> // 체크박스 생성
</li> // 9번 반복함
</c:forEach>
</ul>
</body>
14.8 다국어 태그 라이브러리 사용하기
581p
웹 사이트 중 다른나라의 언어를 선택하면 해당 언어로 변환해서 화면을 표시하는 것들이 있음
이는 JSP에서 다국어 태그 라이브러리를 사용하여 다국어 기능을 쉽게 구현할 수 있음
▼다국어 태그 라이브러리 종류
| 분류 | 태그 | 설명 |
| 다국어 | <fmt:setLocale> | Locale(언어)을 지정함 |
| <fmt:message> | 지정한 언어에 해당하는 언어를 표시함 | |
| <fmt:setBundle> | 사용할 번들을 지정함 | |
| <fmt:setParam> | 전달할 매개변수를 지정함 | |
| <fmt:requestEncoding> | 요청 매개변수의 문자 인코딩을 지정함 |
다국어 태그 라이브러리의 사용법에 대해 14.9에서 알아보자
14.9 한글을 아스키 코드로 변환하기
583p
다국어 기능을 사용하려면 미리 한글을 아스키 코드로 변환한 형태로 저장하고 있다가
요청 시 이 아스키 코드를 한글로 변환해서 표시함
표시할 한글을 아스키 코드로 변환하는 방법부터 알아보자
1. Properties Editor 설치하기
이클립스에 한글을 아스키 코드로 변환하는 기능을 제공하는 Properties Editor 플러그인을 설치하자
이클립스 상단 메뉴 > Help > Install New Software >Add > Name은 Properties Editor로, Location은 http://propedit.sourceforge.jp/eclipse/updates로로 입력 후 Add > PropertiesEditor 항목을 선택한 후 Next > Install Details 화면이 나타나면 Next를 클릭 > 라이선스 정책에 동의한 후 Finish > 설치 후 이클립스 재실행
2. 한글 아스키 파일 만들기 586p
한글 아스키 코드를 저장하는 propterties 파일을 만들어보자
프로젝트/src 폴더에 resource 패키지를 생성 후 우클릭> New > Other > General 항목의 File을 선택 후 Next > 파일 이름으로 member.properties를 입력 후 Finish > resource 패키지에 member.properties가 생성된 것 확인 > 같은 방법으로 member_ko.properties, member_en.properties 파일을 생성
> member.properties 파일을 열어 키/값 쌍으로 회원 정보를 한글로 작성 후 저장
mem.name = 홍길동
mem.address = 서울시 강남구
mem.job = 회계사
> 작성한 회원정보 전체를 마우스로 드래그 후 우클릭 > 'Unicode표시' 를 선택 > 창에 표시된 아스키코드 전체를 드래그 후 복사하기 > member_ko.properties 파일을 열어 붙여넣음
> member_en.properties 파일을 열어 동일한 key에 대한 회원 정보를 영어로 입력함
mem.name = hong kil-dong
mem.address = kang-nam gu, seoul
mem.job = account
3. jsp 페이지에 다국어 표시하기 590p
앞에서 만든 아스키 코드를 이용해 한글과 영어를 표시해보자
프로젝트의 WebContent 폴더에 test05 폴더를 만든 후 message1.jsp 파일을 저장함,
[ message1.jsp ]
<fmt:setLocale> 태그를 이용해 표시할 locale(언어)를 지정한 후 <fmt:bundle>을 이용해 resource 패키지의 프로퍼티 파일을 읽어옴, <fmt:message> 태그를 이용해 프로퍼티 파일의 키(key) 값에 대한 값을 각각 출력함
... // taglib 디렉티브 태그로 코어, 다국어 jstl을 설정함
...
// <fmt:setLocale value="en_US" /> : locale을 영어로 지정함
<fmt:setLocale value="ko_KR" /> // locale을 한글로 지정함
...
<fmt:bundle basename="resource.member" > // resource 패키지 아래 member 프로퍼티(member.properties)를 읽어옴
이름 : <fmt:message key="mem.name" />
주소 : <fmt:message key="mem.address" />
직업 : <fmt:message key="mem.job" /> // <fmt:message> 태그의 key 속성에다 프로퍼티 파일의 key를 지정하여 값을 출력함
...
=> 브라우저에서 messae1.jsp 로 요청 시 한글로 회원 정보를 출력함,
한글 locale을 주석처리하고 영어 locale을 활성화하면 회원정보가 영어로 출력됨
14.10 포매팅 태그 라이브러리 사용하기
593p
숫자 데이터의 세자리마다 찍히는 콤마(12,000,000 등)가 찍히는 것처럼
JSTL 포매팅 라이브러리를 사용하면 쉽게 원하는 형태로 숫자나 문자열을 표시할 수 있음
▼포매팅 태그 라이브러리 종류
| 분류 | 태그 | 설명 |
| 포매팅 | <fmt:timeZone> | 둘 다 지정한 국가의 시간으로 지정하는 태그임. 그러나 <fmt:timeZone> 태그의 경우 태그를 열고 닫는 영역 안에서만적용된다는 차이가 있음 |
| <fmt:setTimeZone> | ||
| <fmt:formatNumber> | 표시할 숫자의 형식을 지정함 | |
| <fmt:formatDate> | 지정한 형식의 날짜를 표시함 |
▼<fmt:formatNumber> 태그의 여러가지 속성
| 속성 | 설명 |
| value | 출력될 숫자를 지정함 |
| type | 출력될 타입을 지정함 percent : %, number : 숫자, currency : 통화 형식 으로 출력함 |
| dateStyle | 날짜의 출력 형식을 지정함 DateFormat 클래스의 full, long, medium, short 등이 지정되어 있음 |
| groupingUsed | 콤마 등 기호로 구분 여부를 지정함 이 속성이 'true'이면 50000이 50,000으로 표시됨 (기본값은 true) |
| currencyCode | 통화 코드를 지정함. 한국 원화는 KRW |
| currencySimbol | 통화를 표시할 때 사용할 기호를 표시함 |
| var | <formatNumber> 태그 결과를 저장할 변수의 이름을 지정함 |
| scope | 변수의 접근 범위를 지정함 |
| pattern | 숫자가 출력될 양식을 지정함 자바의 DecimalFormat 클래스에 정의된 형식을 따름 |
▼<fmt:formatDate> 태그의 여러가지 속성
| 속성 | 설명 |
| value | 포매팅될 날짜를 지정함 |
| type | 포매팅할 타입을 지정함 date인 경우 날짜만, time인 경우 시간만, both인 경우 모두 지정함 |
| dateStyle | 날짜의 출력 형식을 지정함 DateFormat 클래스의 full, long, medium, short 등이 지정되어 있음 |
| timeStyle | 시간 출력 형식을 지정함 자바 클래스 DateFormat에 정의된 형식을 사용함 |
| pattern | 직접 출력 형식을 지정함 자바 클래스 SimpleDateFormat에 지정된 패턴을 사용함 |
| timeZone | 특정 나라 시간대로 시간을 설정함 |
포매팅 태그 라이브러리 사용 실습
594p
포매팅 태그 라이브러리를 사용하여 여러 가지 숫자와 날짜 정보를 표시해보자
[ formatTest.jsp ]
...
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> // fmt 태그라이브러리 사용을 위해 설정해야함
...
// formatNumber 사용예제
<c:set var="price" value="100000000" />
<fmt:formatNumber value="${ price }" type="number" var="priceNumber" /> // 변수 priceNumber에 결과 저장됨
일반숫자로 표현 시 : ${ priceNumber } // 숫자 100000000가 콤마로 구분되어 '숫자(number)'로 출력됨
통화로 표현 시 :
<fmt:formatNumber type="currency" currencySimbol="\" value="${ price }" groupingUsed="true" />
// 맨앞에 통화기호 '\' 가 표시되고, price인 100000000가 콤마로 구분되며 '통화'로 출력됨
퍼센트로 표현 시 :
<fmt:formatNumber value="${ price }" type="percent" groupingUsed="false" />
// 숫자 100000000 뒤에 %만 붙어서 출력됨(콤마로 구분 안함)
// formatDate 사용예제
<c:set var="now" value="<%= new Date() %>" /> // 현재 날짜,시간으로 만든 Date 객체를 변수 now에 할당
<fmt:formatDate value="${ now }" type="date" dateStyle="full" /> // 날짜만 full로 출력 (2018년 9월 13일 목요일)
<fmt:formatDate value="${ now }" type="date" dateStyle="short" /> // 날짜만 short로 출력 ( 18. 9. 13. )
<fmt:formatDate value="${ now }" type="time" /> // 시간만 출력 ( 오후 1:22:25 )
<fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full" />
// 날짜, 시간 full로 출력 (2018년 9월 13일 목요일 오후 1시 22분 25초 대한민국 표준시)
<fmt:formatDate value="${ now }" pattern="YYYY-MM-dd :hh:mm:ss" /> // 2018-09-13 :01:22:25
한국현재시간 :
<fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full" />
//2018년 9월 13일 목요일 오후 1시 22분 25초 대한민국 표준시
<fmt:timeZone value="America/New York"> // 뉴욕 시간대로 변경
뉴욕현재시간 :
<fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full" />
//2018년 9월 13일 목요일 오전 4시 22분 25초 그리니치 표준시
</fmt:timeZone> // 기준 시간대 원래대로 변경
14.11 문자열 처리 함수 사용하기
597p
자바에서 문자열을 처리할 때 사용하는 문자열 관련 기능을 JSTL에서 제공하는 함수를 이용하여 JSP에서도 사용할 수 있음. 아래 표에 나오지 않는 문자열 기능은 자바 String 클래스의 메서드를 참고하면 됨.
▼JSTL에서 제공하는 여러 가지 문자열 함수
| 함수 | 반환타입 | 설명 |
| fn:contains(A,B) | boolean | 문자열 A가 문자열 B를 포함하고 있는지 확인함 |
| fn:endWith(A,B) | boolean | 문자열 A가 B로 끝나는지 확인함 |
| fn:indexOf(A,B) | int | 문자열 A에서 B가 처음 자리하는 인덱스를 반환함 |
| fn:length(A) | int | 문자열 A의 전체 길이를 반환함 |
| fn:replace(A,B,C) | String | 문자열 A에서 B에 해당하는 문자를 찾아 C로 변환함 |
| fn:toLowerCase(A) | String | A를 모두 소문자로 변환함 |
| fn:toUpperCase(A) | String | A를 모두 대문자로 변환함 |
| fn:subString(A,B,C) | String | 문자열 A에서 인덱스 B~C까지의 문자열을 반환함 |
| fn:split(A,B) | String[] | A에서 구분자 B를 기준으로 잘라 잘린 문자열을 배열로 반환 |
| fn:trim(A) | String | 문자열 A에서 앞뒤 공백을 제거함 |
실습
[ fnTest.jsp ]
<%@ taglib prefix="fn" uri="http:java.sun.com/jsp/jstl/functions" %> // 문자열 함수 사용을 위해 선언함
...
<c:set var="title1" value="hello world!" />
<c:set var="title2" value="쇼핑몰 중심 JSP 입니다.!" />
<c:set var="str1" value="중심" />
...
${ fn:length(title1) } // 12 (문자열 길이 반환, 공백도 포함)
${ fn:toUpperCase(title1) } // HELLO WORLD!
${ fn:toLowerCase(title1) } // hello world!
${ fn:subString(title1, 3, 6) } // lo (문자열 인덱스 3~5 반환, 끝 인덱스인 6은 반환 문자열에 포함되지 않음)
${ fn:trim(title1) } // 문자열 앞뒤 공백을 제거함
${ fn:replace(title1, " ", "/") } // hello/world! (title1에서 공백을 '/'로 대체함)
${ fn:indexOf(title2, str1) } // 4 (title2에서 str1이 시작하는 인덱스를 반환함, '중'의 인덱스는 4)
${ fn:contains(title1, str1) } // false (title1에는 str1이 포함되지 않음)
${ fn:contains(title2, str1) } // true (title2에는 str1이 포함됨)
14.12 표현언어와 JSTL을 이용한 회원관리 실습
600p
지금의 JSP는 표현언어와 JSTL을 사용하여 개발함. 이에 익숙해지기 위해 13장에서 실습한 회원가입 및 조회과정을 표현언어와 jstl로 구현해보자
13장에서 사용한 MemberBean 클래스, MemberDAO 클래스를 복사해 붙여넣음,
[ memberForm.jsp ]
회원가입창, 회원정보를 입력하면 action의 member_action.jsp로 전송함.
[ member_action.jsp ]
화면기능을 수행하지 않고 데이터베이스 연동 기능만 수행함
회원정보를 추가한 후 다시 회원정보를 조회하고, 조회한 정보를 request에 바인딩 후 membersList.jsp로 포워딩함
...
<jsp:useBean id="m" class="sec02.ex01.MemberBean" /> // MemberBean 객체 m 생성
<jsp:setProperty name="m" property="*" /> // memberForm.jsp에서 전송된 정보들을 m에 속성으로 저장함
<%
MemberDAP memDAO = new MemberDAO();
memDAO.addMember(m); // DAO 객체를 이용해 회원 테이블에 m에 저장된 회원정보를 추가함
List membersList = memDAO.listMembers(); // 회원정보목록 조회해 list에 저장함
request.setAttribute("membersList", membersList); // request에 조회한 회원정보리스트 바인딩함
%>
...
<jsp:forward page="membersList.jsp" /> // 다시 membersList.jsp로 포워딩함
[ membersList.jsp ]
자바코드 없이 표현언어와 jstl만으로 회원정보를 표시함
...
<c:choose>
// ArrayList list = request.getAttribute("membersList"); 바인딩된 정보 가져오는 자바코드 사용x
<c:when test="${ membersList == null }"> // membersList 이름으로 바인딩된 속성에 아무 값(객체)도 없다면
<tr>
<td colspan=5>등록된 회원이 없습니다</td>
</c:when>
<c:when test="${ membersList != null }"> // membersList에 객체가 들어있으면
<c:forEach var="mem" items="${ membersList }">
<tr align="center">
<td>${ mem.id }</td>
... // mem.id, mem.pwd, mem.name, mem.email, mem.joinDate 모두 출력
</tr>
</c:forEach>
</c:when>
</c:choose>
'(책) 자바 웹을 다루는 기술' 카테고리의 다른 글
| Chap 16 HTML5와 제이쿼리 (0) | 2023.09.07 |
|---|---|
| Chap 15 JSP 페이지를 풍부하게 하는 오픈 소스 기능 (0) | 2023.09.01 |
| Chap 14 표현 언어와 JSTL -2 (0) | 2023.08.29 |
| Chap 14 표현 언어와 JSTL -1 (0) | 2023.08.27 |
| Chap 13 자바 코드를 없애는 액션 태그 (0) | 2023.08.26 |