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

Read More

ASP.NET MVC, Guest Book Application (3) (Penggunaan Database)

Berjumpa lagi disini, dengan post baru lagi, post kali ini merupakan lanjutan dari part sebelumnya yaitu
http://www.ridwanfansuri.com/2012/05/aspnet-mvc-guest-book-application-1.html dan
http://www.ridwanfansuri.com/2012/05/aspnet-mvc-guest-book-application-2.html
Jadi apabila belum membaca post sebelumnya anda pasti akan merasa kebingungan seperti anak kambing yang kehilangan induknya ;P.

Post kali ini akan membahas penggunaan database pada aplikasi yang telah kita buat sebelumnya, mengapa perlu menggunakan database? jawabanya adalah biar kita gaul, trendy dan selalu eksis, oke just kidding. sebenernya kita menggunakan database karena disetiap interview pekerjaan pasti kita akan ditanya apakah sudah pernah membuat aplikasi menggunakan database (curcol).

Pertama-tama yang kita lakukan adalah membuat database untuk wadah penyimpanan data dari aplikasi yang telah kita buat. Database server yang kita gunakan adalah SQL Server, tapi sayang tidak gratis. Setelah kita login kedalam sql server, kemudian kita buat database baru seperti gambar dibawah.

Kemudian akan muncul kotak dialog seperti ini

Kita beri nama yang sama dengan digambar. setelah dibuat maka database baru yang kita buat akan muncul seperti gambar dibawah

Next step adalah membuat table, kita buat table yang field-nya sama dengan class GuestBookEntry yang telah kita buat saja. langkah-langkahnya kita klik kanan folder Tables pada GuestBookBlog pilih New Table..

Kemudian kita isikan field-fieldnya seperti ini

jangan lupa field EntryId kita buat sebagai primary key dan auto increment

Setelah database selesai, saatnya kita menyambungkan dengan aplikasi kita, kita buka project kita yang kemarin, kemudian kita buka server explorer klik kanan pada data connection kemudian pilih Add Connection

Kemudian akan muncul kotak dialog seperti ini

Pada data source kita pilih Change, maka akan muncul kotak dialog seperti dibawah ini

Kita pilih Microsoft SQL server, kemudian pilih OK. Setelah itu kita isikan kotak dialog Add Connection seperti ini

Setelh kita pilih OK, maka database tersebut akan mucul di tab server explorer

Apakah hal ini sudah cukup? tentu saja tidak. Sekarang bagaimana caranya kita menyambungkan koneksi yang telah kita buat sebelumnya kedalam aplikasi kita. banyak cara sebenaranya tinggal cari di google maka akan muncul semua, pada tutorial kali ini saya akan menggunakan Entity Framework, yang belum tau apa itu Entity Framework bisa baca disini.

Bagaimana caranya menggunakan Entity Framework? pertama-tama kita klik kanan pada folder models

Kemudian kita pilih seperti gambar dibawah.

Kemudian pilih generate from database

Kita pilih connection yang telah kita buat tadi

Setelah itu maka akan muncul kotak dialog seperti dibawah, karena tadi kita hanya membuat table saja, maka kita centang tables saja.

Maka Hasilnya akan seperti ini

Kita udah properties dari entry tersebut menjadi seperti ini

Hal ini akan menyebabkan error, karena kita tekah mempunyai kelas dengan nama GuestBookEntry, untuk menanggulanginya kita ubah kelas GuestBookEntry menjadi partial class -untuk yang belum tahu partial class bisa baca ini- kemudian kita comment semua property didalam class karena kita sudah memiliknya didalam table yang kita buat.

Setelah itu, kita akan membuat beberapa method untuk akses database menggunakan entity framework yang telah kita buat, banyak cara untuk menggunakanya, tetapi pada tutorial kali ini saya akan menggunakan reporsitory class yang berisi method-method seperti create, update, delete. Untuk awal kita akan membuat method create untuk memasukan kedalam database. Kita buat class baru di folder models lalu kita beri nama GuestBookReporsitory.

Method Add merupakan method yang memasukan object berupa GuestBookEntry kedalam entity GuestBook pada entity framework. method Save mengupdate database setelah dilakukan suatu transaksi seperti CRUD. Kemudian Kita ubah Action Index di controller menjadi seperti dibawah.

Kita build ulang lalu kita coba jalankan

Ketika kita klik sign kita tidak berpindah ke halaman manapun karena Action ThankYou masih belum diubah, tetapi apabila kita melihat database data yang kita inputkan sudah masuk.

klik kanan pada table

hasilnya

Untuk menampilkan data seperti tutorial sebelumnya kita lakukan beberapa perubahan pada method ThankYou, kita ubah agar menjadi seperti dibawah ini

Oh iya sebelumnya kita buat method GetData untuk mengambil data berdasarkan dari id pada GuestBookReporsitory

Kemudian kita ubah halaman view dari ThankYou menjadi seperti dibawah ini

Kita ubah inherts halaman menjadi inherit ke class GuestBookEntry, kemudian kita ubah code untuk menampilkan data menjadi seperti gambar diatas. Kita build ulang lalu kita coba jalankan lagi.

coba tes lagi

hasilnya

Cakep kan.. untuk kali ini cukup sampai disini saja, apabila ada pertanyaan silahkan di comment saja. terima kasih samapai jumpa lagi

Read More

ASP.NET MVC, Guest Book Application (2) (Penggunaan Model)

Selamat berjumpa kembali di blog saya, Post kali ini akan membahas penggunaan model pada aplikasi aspnet mvc. Pada postingan sebelumnya  guestBook (1) sudah membahas bagaimana cara membuat aplikasi web asp mvc. Tetapi pada postingan sebelumnya, belum menggunakan model layer, karena, apalah arti MVC tanpa model layer, bagaimana sayur kurang garam, kurang enak kurang sedap. oke just kidding.

Kita buka project yang telah kita buat pada tutorial sebelumnya. kemudian hal yang kita lakukan adalah membaca basmallah, setelah itu kita tambahkan class baru pada folder models dengan nama GuestBookEntry sebagai model yang akan kita pakai.

Pada class GuestBookEntry kita tulis (sory, template blogger yang baru ga ngedukung syntaks highlighter )

public class SplitString {

     public class GuestBookEntry
    {
        public string  Name { get; set; }
        public string Email { get; set; }
        public string Comments { get; set; }
    }

setelah itu kita ubah inherits pada halaman indeks (letaknya paling atas code indeks) yang tadinya berupa

<%@ Page Title="" Language="C#" 
MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage" %>;

Menjadi

Code Lengkap

setelah di import model (perhatikan bagian yang diberi highlight)

Jangan lupa merubah code Label menjadi LabelFor dsb agar kita langsung merender dari model secara langsung. dan jangan lupa Meng-Instance GroupEntry Pada Action Index kemudian mengirimkanya ke halaman index

Kemudian kita build ulang dan kita jalankan lagi, hasilnya akan sama seperti pada tutorial pertama.

Bisa kan...

Kalau kita lihat pada halaman Sign, url tersebut masih kita lihat. Hal ini dikarenakan kita meng-Hard Code url, apabila kita merubah struktur url akan menyebabkan break.  Kemudian url tersebut masih tertulis sign padahal kita mendirect ke halaman ThankYou pada controller, hal ini disebabkan karena kita tidak redirect ke sebuah success page, tetapi hanya merender. Kemudian apabila kita refresh halaman, hal ini akan menyebabkamkita memasukan data kembali, yang menyebabkan data dimasukan 2 kali.

kalo direfresh

Untuk memecahkan masalah tersebut kita ganti code pada halaman index dengan menggunakan <%Html.BeginForm()%>  menjadi seperti ini

kemudian coba kita jalankan.
Setelah kita jalankan kita tidak akan bisa memasukan data tersebut, aplikasi hanya kembali ke halaman index. untuk mengatasinya kita tambahkan action seperti ini

Cara lain yang bisa kita gunakan adalah dengan merubah nama action Sign menjadi index, sehingga kita tidak perlu menambahkan action pada BeginForm.

Kita build dan kita jalankan lagi.
Untuk menghilangkan url sign, kita tambahkan [HttpPost] pada action Index yang kedua

Setelah dijalankan maka url berubah menjadi

Apakah telah selesai? apakah aplikasi kita sudah ok? belum, aplikasi kita masih mengirimkan data ketika di refresh, cara untuk mengatasi hal tersebut adalah dengan:
   1. Mem-Post data ke sebuah action
   2. Redirect user ke sebuah action yang berbeda
   3. User browser mendapatkan issue sebuah Get untuk sebuah action yang baru

Kita rubah GuestBookController kita menjadi seperti ini

Kemudian kita build dan kita jalankan lagi. Maka apabila kita submit maka url akan di-direct ke halaman ThankYou bukan sign lagi,

 dan apabila kita refresh maka akan kembali ke halaman awal

kembali ke halaman awal

Sekian untuk post kali ini, sampai jumpa di Post selanjutnya, Semoga Bermanfaat.

Read More