본문 바로가기

JSP, Servlet, MySQL/JSP - webmarket

JSP Servlet 다국어 처리 : 상품 등록 페이지의 다국어 처리하기 2

728x90
반응형

3.3 숫자 태그의 기능과 사용법

formatNumber 태그

formatNumber 태그는 숫자를 형식에 맞춰 출력하는 태그로 형식은 다음과 같다

<fmt:formatNumber value="형식화할 숫자"
	[type="{number|currency|percent}"] //기본값은 number
    [pattern="사용자 정의 패턴"]
    [currencycode="통화코드"] //type="currency"일 때만 적용
    [currencySymbol="통화 기호"] //type="currency"일때만 적용
    [groupingUsed="천 단위마다 구분 기호 {true|false}"] //기본값은 true
    [maxIntegerDigits="최대 자릿수"]
    [minIntegerDigits="최소 자릿수"]
    [maxFractionDigits="소수점 이하 최대 자릿수"]
    [minFractionDigits="소수점 이하 최소 자릿수"]
    [var="형식화된 결과를 저장할 변수 이름"]
    [scope="{page|request|session|application}"]/>   //기본값은 page

다음은 fomatNumber 태그를 이용하여 숫자를 다양한 형식으로 출력하는 예이다

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	
	<p> 숫자 : <fmt:formatNumber value="1234.567" type="number" />
	<p> 통화 : <fmt:formatNumber value="1234.567" type="currency" currencySymbol="원" />
	<p> 퍼센트 : <fmt:formatNumber value="1234.567" type="percent" />
	<p> 패턴(.0000) : <fmt:formatNumber value="1234.567" pattern=".0000"/>
	 
</body>
</html>

 

parseNumber태그

parseNumber 태그는 formatNumber 태그와 반대로 사용자가 설정한 패턴 문자열에서 숫자를 추출하는 태그로 형식은 다음과 같다

<fmt:parseNumber value="파싱할 숫자"
	[type="{number|currency|percent}"]
    [pattern="사용자 정의 패턴"]
    [parseLocale="파싱의 기본 형식 패턴을 제공하는 로케일"]
    [integerOnly="{true|flase}"]
    [var="파싱 결과를 저장할 변수 이름"]
    [scope="{page|request|session|application}"]/>

다음은 parseNumber 태그를 이용하여 설정된 형식에 맞게 숫자를 출력하는 예이다

[parseNumber 태그 사용 예]

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	
	
	<p> 패턴(없음) : <fmt:parseNumber value="1234.567"/>
	<p> 패턴(0000.000) : <fmt:parseNumber value="1234.567" pattern="0000.000"/>
	<p> 패턴(####.###) : <fmt:parseNumber value="1234.567" pattern="####.###"/>
	 
</body>
</html>

 

=사용자의 로케일에 따라 숫자를 다양한 형식에 맞춰 출력하기=

 

/ch09/jstl_fmt02.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	<p> 숫자 : <fmt:formatNumber value="3200100"/>
	<p><fmt:formatNumber value="3200100" type="number" />
	<p><fmt:formatNumber value="3200100" type="number" groupingUsed="false" />
	<p><fmt:formatNumber value="3200100" type="currency" groupingUsed="true"/>
	<p><fmt:formatNumber value="3200100" type="currency" currencySymbol="&" />
	<p><fmt:formatNumber value="0.45" type="percent" />
	<p><fmt:formatNumber value="3200100" minIntegerDigits="10" minFractionDigits="2" />
	<p><fmt:formatNumber value="3200100.45" pattern=".000"/>
	<p><fmt:formatNumber value="3200100.456" pattern="#,#00.0#"/>
	
	
		 
</body>
</html>

 

 

3.4날짜 태그의 기능과 사용법

formatDate태그

formatDate태그는 날짜 정보를 담고 있는 객체를 형식화하여 출력하는 태그로 형식은 다음과 같다

<fmt:formatDate value="형식화할 날짜"
	[type="{time|date|both}"]
    [dateStyle="{default|short|medium|long|full}"]
    [timeStyle="{default|short|medium|long|full}"]
    [pattern="사용자 정의 패턴"]
    [timeZone="타임존"]
    [var="형식화된 결과를 저장할 변수 이름"]
    [scope="{page|request|session|application}"]/>

다음은 formatDate 태그를 이용하여 날짜를 다양한 형식으로 출력하는 예이다

[formatDate 태그 사용 예]

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	<jsp:useBean id="now" class="java.util.Date"/>
	<p>date 형식 : <fmt:formatDate value="${now}" type="date"/>
	<p>time 형식 : <fmt:formatDate value="${now}" type="time"/>
	<p>both 형식 : <fmt:formatDate value="${now}" type="both"/>
	
		 
</body>
</html>

 

parseDate 태그

parseDate 태그는 문자열로 표시된 날짜와 시간 값을 java.util.Date 로 변환하는 태그로 형식은 다음과 같다

<fmt:parseDate value="파싱할 날짜"
	[type="{time|date|both}"]
    [dateStyle="{default|short|medium|long|full}"]
    [timeStye="{default|short|medium|long|full}"]
    [pattern="사용자 정의 패턴"]
    [timeZone="타임존"]
    [parseLoclae="파싱의 기본 형식 패턴을 제공하는 로케일"]
    [var="파싱 결과를 저장할 변수 이름"]
    [scope="{page|request|session|application}"]/>

[parseDate 태그 사용 예]

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	<p><fmt:parseDate value="20180402230605" pattern="yyyyMMddHHmmss"/>
	<p><fmt:parseDate pattern="yyyyMMddHHmmss">20180402230605</fmt:parseDate>
	<p><fmt:parseDate value="20180402230605" pattern="yyyyMMddHHmmss" var="date" scope="page"/>
	<p><fmt:formatDate value="${date}" pattern="yyyy-MM-dd HH:mm"/> 
</body>
</html>

 

=사용자의 로케일에 따라 날짜 형태 출력하기=

/ch09/jstl_fmt03.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	<p><jsp:useBean id="now" class="java.util.Date"/>
	<p><fmt:formatDate value="${now}" type="date"/>
	<p><fmt:formatDate value="${now}" type="time"/>
	<p><fmt:formatDate value="${now}" type="both"/>
	<p><fmt:formatDate value="${now}" type="both" dateStyle="default" timeStyle="default"/>
	<p><fmt:formatDate value="${now}" type="both" dateStyle="short" timeStyle="short"/>
	<p><fmt:formatDate value="${now}" type="both" dateStyle="medium" timeStyle="medium"/>
	<p><fmt:formatDate value="${now}" type="both" dateStyle="long" timeStyle="long"/>
	<p><fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
	<p><fmt:formatDate value="${now}" type="both" pattern="yyyy년MM월dd일 HH시mm분ss초 E요일"/>
	
	
	 
</body>
</html>

 

3.5시간 태그의 기능과 사용법

timeZone 태그

timeZone태그는 시간대별로 시간을 처리하는 태그로 형식은 다음과 같다

<fmt:timeZone value="타임존">
     //
</fmt:timeZone>

[timeZone 태그 사용 예]

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	<jsp:useBean id="now" class="java.util.Date"/>
	<p> 한국 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
	<p> <fmt:timeZone value="GMT-8">
		 뉴욕 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
		</fmt:timeZone>
	<p> <fmt:timeZone value="GMT">
		 런던 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
		</fmt:timeZone>
</body>
</html>

 

 

setTimeZone 태그

setTimeZone 태그는 특정 영역 범위의 시간대별로 시간을 처리하는 태그로 형식은 다음과 같다

<fmt:setTimeZone value="타임존"
	[var="시간대 결과를 저장할 변수 이름"]
    [scope="{page|request|session|application}"]/>

[setTimeZone 태그 사용 예]

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	<jsp:useBean id="now" class="java.util.Date"/>
	<p> 한국 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
	<p> <fmt:setTimeZone value="GMT-8"/>
		 뉴욕 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
	<p> <fmt:setTimeZone value="GMT"/>
		 런던 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
</body>
</html>

=사용자의 로케일에 따라 타임존 출력하기=

/ch09/jstl_fmt04.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>
	Internationalization
</title>
</head>
<body>
	<p><jsp:useBean id="now" class="java.util.Date"/>
	<p>한국 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
	<p>	<fmt:timeZone value="America/New_York">
			뉴욕 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
		</fmt:timeZone>
	<p>	<fmt:timeZone value="Europe/London">
			런던 : <fmt:formatDate value="${now}" type="both" dateStyle="full" timeStyle="full"/>
		</fmt:timeZone>
	
	
	 
</body>
</html>

 

 

04. 상품 등록 페이지의 다국어 처리하기

 

=JSTL fmt 태그를 이용하여 상품 등록 페이지의 다국어 처리하기=

  1. jstl 라이브러리 jstl-1.2.jar 등록하기
  2. 한글 리소스 번들 만들기: /src/폴더에 bundle 폴더를 만든 후 이 폴더에 message.properties 파일을 생성하고 다음과 같이 메시지를 작성한다. 
title = \uC0C1\uD488 \uB4F1\uB85D
productId = \uC0C1\uD488 \uCF54\uB4DC
pname = \uC0C1\uD488\uBA85
unitPrice = \uAC00\uACA9
description = \uC0C1\uC138 \uC124\uBA85
manuFacturer = \uC81C\uC870\uC0AC
category = \uBD84\uB958
unitsInStock = \uC7AC\uACE0 \uC218 
condition = \uC0C1\uD0DC
productImage = \uC774\uBBF8\uC9C0
condition_New = \uC2E0\uADDC \uC81C\uD488
condition_Old = \uC911\uACE0 \uC81C\uD488
condition_Refurbished = \uC7AC\uC0DD \uC81C\uD488
button = \uB4F1\uB85D

 

3. 영문 리소스번들 만들기: /src/bundle/폴더에 message_en.properties 파일을 생성하고 다음과 같이 메시지를 작성한다. 

title = Product Addition
productId = Product ID
pname = Name
unitPrice = Unit Price
description = Description
manuFacturer = manufacturer
category = Category
unitsInStock = Units in Stock
condition = Condition
productImage = Image
condition_New = New
condition_Old = Old
condition_Refurbished = Refurbished
button = Insert

4. 상품 등록 페이지의 다국어 처리하기 : 다국어 처리를 위해 addProduct.jsp 파일을 다음과 같이 수정한다.

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css">

<!-- 폼 페이지에 입력 항목의 데이터를 검사하는 핸들러 함수가 저장된 바바스크립트 파일 validation.js를 가져오도록 작성 -->
<script type="text/javascript" src="./resources/js/validation.js"></script>
<title>상품 등록</title>
</head>
<body>
	<fmt:setLocale value='<%=request.getParameter("language") %>'/>
	<fmt:bundle basename="bundle.message">
	<jsp:include page="menu.jsp"/>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3"><fmt:message key="title"/></h1>
		</div>
	</div>
	<div class="container">
		<div class="text-right">
			<a href="?language=ko">Korean</a>|<a href="?language=en">English</a>
		</div>
		<!-- 파일업로드를 위한 폼 태그에 enctype 속성값을 추가로 작성해준다.  -->
		<form name="newProduct" action="./processAddProduct.jsp" class="form-horizontal" method="post" enctype="multipart/form-data">
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="productId"/></label>
				<div class="col-sm-3">
					<input type="text" name="productId" id="productId" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="pname"/></label>
				<div class="col-sm-3">
					<input type="text" name="name" id="name" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="unitPrice"/></label>
				<div class="col-sm-3">
					<input type="text" name="unitPrice" id="unitPrice" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="description"/></label>
				<div class="col-sm-3">
					<textarea name="description" cols="50" rows="2" class="form-control"></textarea><!-- 상품 설명값을 여러줄로 입력받도록 textarea 태그를 작성한다 -->
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="manuFacturer"/></label>
				<div class="col-sm-3">
					<input type="text" name="manufacturer" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="category"/></label>
				<div class="col-sm-3">
					<input type="text" name="category" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="unitsInStock"/></label>
				<div class="col-sm-3">
					<input type="text" name="unitsInStock" id="unitsInStock" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="condition"/></label> <!-- 상품 상태값중 하나만 선택 입력받도록 radio로 작성 -->
				<div class="col-sm-5">
					<input type="radio" name="condition" value="New"> <fmt:message key="condition_New"/>  
					<input type="radio" name="condition" value="Ole"> <fmt:message key="condition_Old"/>      
					<input type="radio" name="condition" value="Refurbished"> <fmt:message key="condition_Refurbished"/>                    
				</div>
			</div>
			
			<!-- 파일을 입력받도록 input 태그의 type 속성값을 file로 작성, name 속성을 작성한다.  -->
			<div class="form-group row">
				<label class="col-sm-2"><fmt:message key="productImage"/></label>
				<div class="col-sm-5">
					<input type="file" name="productImage" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<div class="col-sm-offset-2 col-sm-10">
				<!-- <등록>을 클릭하면 핸들러 함수CheckAddProduct()가 실행되도록 onclick속성을 작성한4ㄷ -->
					<input type="button" class="btn btn-primary" value="<fmt:message key="button"/>" onClick="CheckAddProduct()">
					
				</div>
			</div>
		</form>
	</div>
</fmt:bundle>
</body>
</html>

한국어로 설정된 페이지

 

영어로 설정된 페이지

 

728x90
반응형