XEM BÀI VIẾT THEO TỪ KHÓA
ai angular aspnetcore backend chat ckeditor cqrs csharp dart eclipse erd flutter frontend giai-thuat hibernate java javaweb jsp jwt laravel md5 mongodb nosql oop opencv oracle pattern project python restful security servlet spring sql typescript webapi webservice website
CÔNG NGHỆ THÔNG TIN >> BÀI VIẾT CHỌN LỌC

[Java-Web] Tìm hiểu về đa ngôn ngữ với Internationalization và Localization trong JSP Servlet sử dụng thư viện JSTL

Đăng lúc: 04:50 PM - 26/02/2024 bởi Charles Chung - 850

Trong bài này tôi sẽ hướng dẫn các bạn tạo ứng dụng JSP Servlet đa ngôn ngữ với Internationalization và Localization trong JSP Servlet sử dụng thư viện JSTL

1. Giới thiệu

Ngày nay chúng ta muốn mở rộng thị trường để tăng doanh số thì việc phát triển phần mềm phải đáp ứng được cho nhiều quốc gia, khu vực khác nhau, bởi vì mỗi quốc gia, khu vực trên thế giới có ngôn ngữ, hệ thống đo lường, đơn vị tiền tệ, định dạng dữ liệu, v..v... khác nhau do vậy việc phát triển phần mềm cho nhiều quốc gia, khu vực khác nhau là điều cần thiết. Và việc này được triển khai thông qua hai khái niệm Internationalization (i18N) và Localization (L10N). 

  • Internationalization (i18N) là quá trình thiết kế một phần mềm để nó có thể được điều chỉnh thích hợp cho nhiều ngôn ngữ và khu vực mà không có sự thay đổi về kỹ thuật.
  • Localization (L10N) là quá trình chỉ định một ngôn ngữ cụ cho phần mềm đã quốc tế hóa.

Quá trình Internationalization cần phải xử lý hai phần: dữ liệu trên giao diện và dữ liệu trong database. Trong bài viết này tôi sẽ hướng dẫn các bạn xử lý dữ liệu trên giao diện bao gồm ngôn ngữ và định dạng dữ liệu số, ngày tháng, sử dụng thư viện JSTL trong JSP Servlet.

2. Tạo ứng dụng JSP Servlet với i18N và L10N sử dụng thư viện JSTL .

Bước 1: Tạo Dynamic Web Project

Khởi động Eclispe IDE -> vào menu File -> New -> Dynamic Web Project -> Nhập tên "JSPServletSession08"

Bước 2: Convert sang Maven Project

Kích chuột phải vào Project vừa tạo -> Configure -> Convert to Maven Project -> Finish

Bước 3: Khai báo các Maven Dependencies.

Mở file pom.xml khai báo thư viện jstl

1
2
3
4
5
6
7
8
 
 <dependencies>
		<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
</dependencies>

Bước 4: Tạo file properties để khai báo các nhãn cho ngôn ngữ, tên file đặt theo quy tắc filename_languagecode_COUNTRYCODE.properties

  • Tạo tệp Language_en_US.properties đặt trong gói lang

  • Tạo tệp Language_vi_VN.properties đặc trong gói lang

Bước 5: Tạo các trang jsp

  • Trang index.jsp: hiển thị menu chọn ngôn ngữ, hiển thị form nhập dữ liệu
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:choose>
	<c:when test="${empty param.lang}">
		<f:setLocale value="en_US" scope="session" />
	</c:when>
	<c:otherwise>
		<f:setLocale value="${param.lang}" scope="session" />
		<c:set var="lang" value="${param.lang}" scope="session" />
	</c:otherwise>
</c:choose>
<f:setBundle basename="lang.Language" var="bundle" scope="session" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><f:message bundle="${bundle}" key="title" /></title>
</head>
<body>
	<div style="margin: auto; width: 500px;">
		<p>
			<a href="?lang=vi_VN"><f:message bundle="${bundle}" key="vi" /></a>
			| <a href="?lang=en_US"><f:message bundle="${bundle}" key="en" /></a>
		</p>
		<h1>
			<f:message bundle="${bundle}" key="title" />
		</h1>
		<form action="details.jsp" method="post">
			<table>
				<tr>
					<td><f:message key="id" bundle="${bundle}" /></td>
					<td><input type="text" name="id" /></td>
				</tr>
				<tr>
					<td><f:message key="fullname" bundle="${bundle}" /></td>
					<td><input type="text" name="fullname" /></td>
				</tr>
				<tr>
					<td><f:message key="birthday" bundle="${bundle}" /></td>
					<td><input type="date" name="birthday" /></td>
				</tr>
				<tr>
					<td><f:message key="salary" bundle="${bundle}" /></td>
					<td><input type="number" name="salary" /></td>
				</tr>
				<tr>
					<td><f:message key="rate" bundle="${bundle}" /></td>
					<td><input type="text" name="rate" /></td>
				</tr>
				<tr>
					<td>
						<button>
							<f:message key="submit" bundle="${bundle}" />
						</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>
  • Trang details.jsp: hiển thị kết quả submit từ form của trang index.jsp
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:choose>
	<c:when test="${empty lang}">
		<f:setLocale value="en_US" scope="session" />
	</c:when>
	<c:otherwise>
		<f:setLocale value="${sessionScope.lang}" scope="session" />
	</c:otherwise>
</c:choose>
<f:setBundle basename="lang.Language" var="bundle" scope="session" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%
	request.setCharacterEncoding("UTF-8");
	Date bd = new SimpleDateFormat("yyyy-MM-dd").parse(request.getParameter("birthday"));
	request.setAttribute("bd", bd);
%>
<title><f:message key="title" bundle="${bundle}" /></title>
</head>
<body>
	<div style="margin: auto; width: 500px;">

		<h1>
			<f:message bundle="${bundle}" key="title" />
		</h1>

		<table>
			<tr>
				<td><f:message key="id" bundle="${bundle}" /></td>
				<td>${param.id}</td>
			</tr>
			<tr>
				<td><f:message key="fullname" bundle="${bundle}" /></td>
				<td>${param.fullname}</td>
			</tr>
			<tr>
				<td><f:message key="birthday" bundle="${bundle}" /></td>
				<td><f:formatDate value="${bd}" dateStyle="short" /></td>
			</tr>
			<tr>
				<td><f:message key="salary" bundle="${bundle}" /></td>
				<td><f:formatNumber value="${param.salary}" type="currency" /></td>
			</tr>
			<tr>
				<td><f:message key="rate" bundle="${bundle}" /></td>
				<td><f:formatNumber value="${param.rate}" type="number" /></td>
			</tr>
			<tr>
				<td><f:message key="total" bundle="${bundle}" /></td>
				<td><f:formatNumber value="${param.salary*param.rate}" type="currency" /></td>
			</tr>
			<tr>
				<td><a href="javascript:history.back()"><f:message key="back" bundle="${bundle}" /></a></td>
			</tr>
		</table>

	</div>
</body>
</html>
  • Cấu trúc project như sau

Bước 6: Run và xem kết quả

  • Màn hình mặc định khi chạy lên sẽ hiển thị giao diện Tiếng Anh

  • Khi chọn Tiếng Việt

  • Màn hình kết quả Tiếng Anh

  • Màn hình kết quả Tiếng Việt

Link tải source code

Video 

thay lời cảm ơn!

QUẢNG CÁO - TIẾP THỊ