Fitur Multibahasa dengan Spring Internationalization

Suatu saat mungkin kita menghadapi requirement yang mengharuskan membangun sebuah aplikasi web atau website yang mendukung fitur multibahasa. Jangan berpikiran multibahasa akan sulit untuk diwujudkan karena pada kenyataannya fitur ini mudah untuk diimplementasikan. Spring mendukung fitur multibahasa yang disebut dengan [rad-hl]internationalization (l18n) and localization (l10n)[/rad-hl].

Tulisan kali ini akan membahas implementasi fitur multibahasa pada aplikasi web yang dibangun menggunakan Spring. Contoh aplikasi pada tutorial ini mengacu pada Spring MVC menggunakan Java Based Configuration

Struktur Project

Untuk lebih mudah memahami tutorial kali ini, berikut struktur project maven yang dibuat

Internationlization

Agar aplikasi kita mendukung fitur multibahasa maka kita perlu membuat sebuah file properties untuk menampung kata kunci berikut nilainya dalam bahasa yang diinginkan. Kita akan menggunakan 3 bahasa yaitu inggris, indonesia dan jerman. Dan berikut adalah isi dari masing-masing ketiga file properties

file : src/main/resources/message_ind.properties

label.firstname=Nama Depan

label.lastname=Nama Belakang

label.email=Email

label.telephone=Telepon

label.addcontact=Tambah Kontak

file : src/main/resources/message_en.properties

label.firstname=First Name

label.lastname=Last Name

label.email=Email

label.telephone=Telephone

label.addcontact=Add Contact

file : src/main/resources/message_de.properties

label.firstname=Vorname

label.lastname=Nachname

label.email=Email

label.telephone=Telefonieren

label.addcontact=Kontakt hinzufügen

Perhatikan bahwa nama file properties memiliki pola [rad-hl]message_kodebahasa[/rad-hl]

Konfigurasi

Pada konfigurasi kita membutuhkan beberapa bean
1. [rad-hl]ResourceBundleMessageSource[/rad-hl], digunakan untuk me-load file-file properties yang mengandung terjemahan
2. [rad-hl]LocaleChangeInterceptor[/rad-hl], digunakan untuk mendeteksi perubahan bahasa
3. [rad-hl]SessionLocaleResolver[/rad-hl], digunakan untuk menyimpan perubahan bahasa dalam session
4. Untuk mendaftarkan LocaleChangeInterceptor kita perlu membuat kelas konfigurasi sebagai subkelas dari [rad-hl]WebMvcConfigurerAdapter[/rad-hl]

Dan berikut adalah kelas konfigurasi
file : src/main/java/com/agung/init/WebAppConfig.java

package com.agung.init;

import java.util.Locale;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ResourceBundleMessageSource;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;
import org.springframework.web.servlet.i18n.SessionLocaleResolver;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

/**
 *
 * @author awanlabs
 */
@Configuration
@EnableWebMvc
@ComponentScan("com.agung.controller")
public class WebAppConfig extends WebMvcConfigurerAdapter {
    
    @Bean
    public InternalResourceViewResolver setUpViewResolver(){
        InternalResourceViewResolver resolver=new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/jsp/");
        resolver.setSuffix(".jsp");
        return resolver;
    }
    
    @Bean
    public ResourceBundleMessageSource messageSource(){
        ResourceBundleMessageSource messageSource=new ResourceBundleMessageSource();
        messageSource.setBasename("message");
        return messageSource;
    }
    
    @Bean
    public LocaleChangeInterceptor localeChangeInterceptor(){
        LocaleChangeInterceptor localeChangeInterceptor=new LocaleChangeInterceptor();
        localeChangeInterceptor.setParamName("lang");
        return localeChangeInterceptor;
    }
    
    @Bean
    public LocaleResolver localeResolver(){
        SessionLocaleResolver sessionLocaleResolver=new SessionLocaleResolver();
        sessionLocaleResolver.setDefaultLocale(Locale.ENGLISH);
        return sessionLocaleResolver;
    }
    
    @Override
    public void addInterceptors(InterceptorRegistry interceptorRegistry){
        interceptorRegistry.addInterceptor(localeChangeInterceptor());
    }
}

package com.agung.init;

import java.util.Locale;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

import org.springframework.context.support.ResourceBundleMessageSource;

import org.springframework.web.servlet.LocaleResolver;

import org.springframework.web.servlet.config.annotation.EnableWebMvc;

import org.springframework.web.servlet.config.annotation.InterceptorRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;

import org.springframework.web.servlet.i18n.SessionLocaleResolver;

import org.springframework.web.servlet.view.InternalResourceViewResolver;

/**

* @author awanlabs

@Configuration

@EnableWebMvc

@ComponentScan("com.agung.controller")

public class WebAppConfig extends WebMvcConfigurerAdapter {

@Bean

public InternalResourceViewResolver setUpViewResolver(){

InternalResourceViewResolver resolver=new InternalResourceViewResolver();

resolver.setPrefix("/WEB-INF/jsp/");

resolver.setSuffix(".jsp");

return resolver;

}

@Bean

public ResourceBundleMessageSource messageSource(){

ResourceBundleMessageSource messageSource=new ResourceBundleMessageSource();

messageSource.setBasename("message");

return messageSource;

}

@Bean

public LocaleChangeInterceptor localeChangeInterceptor(){

LocaleChangeInterceptor localeChangeInterceptor=new LocaleChangeInterceptor();

localeChangeInterceptor.setParamName("lang");

return localeChangeInterceptor;

}

@Bean

public LocaleResolver localeResolver(){

SessionLocaleResolver sessionLocaleResolver=new SessionLocaleResolver();

sessionLocaleResolver.setDefaultLocale(Locale.ENGLISH);

return sessionLocaleResolver;

}

@Override

public void addInterceptors(InterceptorRegistry interceptorRegistry){

interceptorRegistry.addInterceptor(localeChangeInterceptor());

}

Untuk kelas initializer dan pom.xml sama dengan yang ada pada tulisan Spring MVC menggunakan Java Based Configuration.

Controller

Sangat sederhana, hanya bertugas untuk menampilkan index.jsp
file : src/main/java/com/agung/controller/HomeCOntroller.java

package com.agung.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

/**

* @author awanlabs

@Controller

public class HomeController {

@RequestMapping(value = "/",method = RequestMethod.GET)

public String index(){

return "index";

}

Halaman JSP

Halaman inilah yang akan menampilkan sebuah form yang mendukung 3 pilihan bahasa.
file : src/main/webapp/WEB-INF/jsp/index.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style type="text/css">
            form{
                background: wheat;
                width: 300px;
                padding: 10px 10px 10px 30px;
                font-family: cursive;
                color: brown;
                border-radius: 8px;
                box-shadow: 0px 10px 10px black;
            }
            
            div{
                margin-bottom: 10px;
            }
            
            input{
                display: block;
            }
            
            input[type=text]{
                width:250px;
                border:1px solid black;
                padding: 5px;
                font-family: monospace;
            }
            
            input[type=submit]{
                background: burlywood;
                border:1px solid black;
                padding: 5px;
                font-family: cursive;
            }
            
            #lang a{
                text-decoration: none;
                color: tomato;
                border-right: 1px solid black;
                padding-right: 5px;
            }
        </style>
    </head>
    <body>
        <div id="lang">
        <a href="<c:url value="?lang=en" />">English</a>
        <a href="<c:url value="?lang=ind" />">Indonesia</a>
        <a href="<c:url value="?lang=de" />">Germany</a>
        </div>
        
        <form>
            <div>
                <label><spring:message code="label.firstname" /></label>
                <input type="text"/>
            </div>
            <div>
               <label> <spring:message code="label.lastname" /></label>
                <input type="text"/>
            </div>
            <div>
                <label><spring:message code="label.email" /></label>
                <input type="text"/>
            </div>
            <div>
                <label><spring:message code="label.telephone" /></label>
                <input type="text"/>
            </div>
            <div>
                <input type="submit" value="<spring:message code="label.addcontact" />"/>
            </div>
        </form>
    </body>
</html>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>

<head>

form{

background: wheat;

width: 300px;

padding: 10px 10px 10px 30px;

font-family: cursive;

color: brown;

border-radius: 8px;

box-shadow: 0px 10px 10px black;

}

div{

margin-bottom: 10px;

}

input{

display: block;

}

input[type=text]{

width:250px;

border:1px solid black;

padding: 5px;

font-family: monospace;

}

input[type=submit]{

background: burlywood;

border:1px solid black;

padding: 5px;

font-family: cursive;

}

#lang a{

text-decoration: none;

color: tomato;

border-right: 1px solid black;

padding-right: 5px;

}

</style>

</head>

<body>

<a href="<c:url value="?lang=en" />">English</a>

<a href="<c:url value="?lang=ind" />">Indonesia</a>

<a href="<c:url value="?lang=de" />">Germany</a>

</div>

<form>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</form>

</body>

</html>

Perhatikan bahwa kita menggunakan tag [rad-hl][/rad-hl] untuk menampilkan kata kunci yang telah kita buat pada 3 file properties tadi. Untuk menggunakan tag tersebut kita perlu mendeklarasikan sebuah taglib, perhatikan pada baris yang saya highlight.

Perhatikan pula bahwa untuk mengubah dari satu bahasa menjadi bahasa lainya kita menggunakan request parameter [rad-hl]lang[/rad-hl]. Perubahan nilai dari variabel ini akan dideteksi oleh [rad-hl]LocaleChangeInterceptor[/rad-hl]

Demo

Arahkan browser ke http://localhost:8080/SpringInternationalization, dan berikut ini adalah screenshot dari aplikasi

Bahasa Inggris

Bahasa Indonesia

Bahasa Jerman

note : mohon maaf kalau ada kesalahan pada bahasa jerman, modal google translate 😛

Source Code

Seperti biasa untuk source code bisa didownload pada repository Github saya disini

Happy programming 😀

Facebook Comments

Agung Setiawan

Software Engineer

Fitur Multibahasa dengan Spring Internationalization

Struktur Project

Internationlization

Konfigurasi

Controller

Halaman JSP

Demo

Source Code

Leave a Reply Cancel reply