Multi Language Page ASP.NET MVC part 1

Hai semua berjumpa lagi, dihari Idul Adha ini daripada bengong nungguin sate mateng mending kita coding :). pada kali ini saya akan menerangkan bagaimana cara mengganti bahasa pada halaman website sesuai dengan bahasa local (multi language) menggunakan asp.net mvc. 

Pertama-tama kita buat new ASP.NET MVC application seperti pada gambar dibawah.

Lalu kita pilih Internet Application dan razor sebaga view engine, jangan lupa un-checked create a unit test project, karena kita tidak akan membuat unit test pada tutorial kali ini.

Lalu akan muncul folder-folder seperti dibawah.

Untuk membuat multi language page, kita membutuhkan sebuah tempat untuk menyimpan template yang akan ditampilkan dihalaman website. template ini berupa sebuah file resource (.resx). untuk menambah resource tersebut, kita add folder App_GlobalResources. Klik kanan project -> add -> add ASP.Net Folder ->; App_GlobalResources, kemudian akan muncul folder seperti gambar dibawah

kemudian kita add resource file. klik kanan pada folder App_GlobalResources -> add -> Resources file beri nama Global untuk bahasa Inggris dan Global.Id untuk resources bahasa Indonesia

File resources tersebut adalah tempat kita menyimpan template untuk ditampilkan pada halaman website, Global untuk resource berbahasa Inggris, dan Global.Id untuk resource bahasa Indonesia. cara kerja resource ini seperti sebuah dictionary, yaiut mempunyai sebuah nama dan nilai (Name & Value).
Resource tersebut kita isi seperti gambar dibawah ini

Bahasa Inggris

Bahasa Indonesia

Untuk menampilkan resource tersebut kita ubah halaman Home/Index menjadi seperti ini

Lalu kita build dan running maka akan halaman website akan seperti ini

Tulisan yang digaris bawahi merupakan value dari resource file yang kita buat tadi. bagaimana cara merubah bahasa menjadi bahasa Indonesia. pertama-tama kita akan membuat sebuah Map.Route baru pada RouteConfig,cs yang memetakan url yang mengandung bahasa (lang). kita tambahkan sebelum default route

// Comment
   routes.MapRoute(
              "Localization", //route Name
              "{lang}/{contoller}/{action}/{id}", //URL with parameter
              new { controller = "Home", action = "Index", id = UrlParameter.Optional } //default parameter
              );

kemudian kita tambahkan satu buah class Attribute. kita beri nama Localization attribute,

public class LocalizationAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if (filterContext.RouteData.Values["lang"] != null &&
                 !string.IsNullOrWhiteSpace(filterContext.RouteData.Values["lang"].ToString()))
            {
                // set the culture from the route data (url)
                var lang = filterContext.RouteData.Values["lang"].ToString();
                Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture(lang);
            }
            else
            {
                // load the culture info from the cookie
                var cookie = filterContext.HttpContext.Request.Cookies["MultiLanguage.CurrentUICulture"];
                var langHeader = string.Empty;
                if (cookie != null)
                {
                    // set the culture by the cookie content
                    langHeader = cookie.Value;
                    Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture(langHeader);
                }
                else
                {
                    // set the culture by the location if not speicified
                    langHeader = filterContext.HttpContext.Request.UserLanguages[0];
                    Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture(langHeader);
                }
                // set the lang value into route data
                filterContext.RouteData.Values["lang"] = langHeader;
            }

            // save the location into cookie
            HttpCookie _cookie = new HttpCookie("MultiLanguage.CurrentUICulture", Thread.CurrentThread.CurrentUICulture.Name);
            _cookie.Expires = DateTime.Now.AddYears(1);
            filterContext.HttpContext.Response.SetCookie(_cookie);

            base.OnActionExecuting(filterContext);
        }
    }

Lalu kita tambahkan attribute tersebut pada action index di HomeController

[Localization]
        public ActionResult Index()
        {

            return View();
        }

Kita build dan voila halaman website kita berubah bahasa

Web Bahasa Inggris

Web Bahasa Indonesia

Cukup sekian tutorial kali ini. tutorial ini masih ada lanjutanya loh, jadi tunggu post berikutnya

untuk source codenya bisa di-download disini