MULTI LANGUAGE PAGE ASP.NET MVC PART 2

Sabtu siang ga tau ma ngapain, pengen nonton film di laptop tapi tetangga sebelah lagi hajatan jadi kurang syahdu, jadi saya memutuskan untuk coding saja 8), saya akan melanjutkan tulisan tentang multi language page pada ASP.NET MVC. pada tulisan sebelumnya kita telah berhasil membuat sebuah halaman web yang multi language, tapi untuk merubah halaman kita masih harus menuliskan pada url-nya, pada tulisan kali ini kita akan membuat sebuah link yang bisa merubah bahasa suatu halaman.

Yang pertama-tama kita lakukan adalah membuah sebuah html helper kalau mau tahu tentang html helper bisa dibaca disini, kita buat class baru kita beri nama SwitchLanguageHelper

public static class SwitchLanguageHelper
    {
        public class Language
        {
            public string Url { get; set; }
            public string ActionName { get; set; }
            public string ControllerName { get; set; }
            //  public string Area { get; set; }
            public RouteValueDictionary RouteValues { get; set; }
            public bool IsSelected { get; set; }
            public MvcHtmlString HtmlSafeUrl { get; set; }
        }

        public static Language LanguageUrl(this HtmlHelper helper, string cultureName, string languageRouteName = "lang", bool stringSelected = false)
        {
            //set the input language to lower
            cultureName = cultureName.ToLower();

            //retrive the route values from the view context
            var routeValues = new RouteValueDictionary(helper.ViewContext.RouteData.Values);

            //copy the query string into route values to generate the link
            var queryString = helper.ViewContext.HttpContext.Request.QueryString;
            foreach (string key in queryString)
            {
                if (queryString[key] != null && string.IsNullOrWhiteSpace(key))
                {
                    if (routeValues.ContainsKey(key))
                    {
                        routeValues[key] = queryString[key];
                    }
                    else
                    {
                        routeValues.Add(key, queryString[key]);
                    }
                }
            }

            var actionName = routeValues["action"].ToString();
            var controllerName = routeValues["controller"].ToString();
            //  var areaName = routeValues["area"].ToString();

            //set language into route values
            routeValues[languageRouteName] = cultureName;
            //generate the language specify url
            var urlHelper = new UrlHelper(helper.ViewContext.RequestContext, helper.RouteCollection);
            var url = urlHelper.RouteUrl("Localization", routeValues);

            //check whether the current thread ui culture is set to language
            var current_lang_name = Thread.CurrentThread.CurrentUICulture.Name.ToLower();
            var isSelected = stringSelected
                                 ? current_lang_name == cultureName
                                 : current_lang_name.StartsWith(cultureName);

            return new Language()
                {
                    Url = url,
                    ActionName = actionName,
                    ControllerName = controllerName,
                    //  Area = areaName,
                    RouteValues = routeValues,
                    IsSelected = isSelected
                };
        }

        public static MvcHtmlString LanguageSelectorLink(this HtmlHelper helper,
           string cultureName, string selectedText, string unselectedText,
            IDictionary htmlAttributes, string languageRouteName = "lang", bool stringSelected = false)
        {
            var language = helper.LanguageUrl(cultureName, languageRouteName, stringSelected);
            var link = helper.RouteLink(language.IsSelected ? selectedText : unselectedText,
                "Localization", language.RouteValues, htmlAttributes);
            return link;
        }


    }

    public class LocalizationDisplayNameAttribute : DisplayNameAttribute
    {
        private DisplayAttribute display;

        public LocalizationDisplayNameAttribute(string resourceName, Type resourceType)
        {
            this.display = new DisplayAttribute()
                {
                    ResourceType = resourceType,
                    Name = resourceName
                };
        }

        public override string DisplayName
        {
            get { return display.GetName(); }
        }
    }

Class ini berfungsi untuk menyimpan informasi dari language links, LanguageUrl method mempunyai fungsi untuk men-generate informasi yang digunakan pada selector seperti URL, RouteValues, dsb.  method ini memuat RuteData dan query string dari request yang datang dan kemudian men-generate URL pada current page dengan bahasa yang dipilih.

Bagaimana menggunakan html helper tersebut, tinggal kita tambahkan saja di halamana _Layout.cshtml

kemudian kita jalankan, maka hasilnya akan seperti ini

sekarang sumber air sudekat, eh sekarang untuk mengganti halaman kita hanya perlu memilih.menekan link yang baru kita buat. Mungkin cukup sekian tulisan kali ini terima kasih.

 source code https://dl.dropboxusercontent.com/u/62442361/MultiLanguage.rar

Read More

ASP.NET MVC, Guest Book Application (4) (Simple CRUD)

Setelah kurang lebih 1 bulan lamanya post terakhir http://www.ridwanfansuri.com/2012/06/aspnet-mvc-guest-book-application-3.html keluar. Kali ini saya akan melanjutkan lagi aplikasi Guest Book yang kemarin telah kita kerjakan tepat pada hari pertama bulan ramadhan ini (ga ada hubunganya sih). 

Kali ini kita akan membuat  Update, dan Delete method pada aplikasi, kemarin kita sudah membuat aplikasi yang bisa menyimpan data dari buku tamu, sekarang akan kita tambahkan method untuk update data dan menghapus. Setelah kita buka project yang kemarin yang pertama kita lakukan adalah membuat sebuah halaman yang menampilan semua data buku tamu yang telah dimasukan. Pertama-tama kita buat sebuah method pada GuestBookReporsitory.cs yang mendapatkan semua data dari database. kita tulis seperti gambar dibawah ini.

Lalu kita tambahakan sebuah action didalam GuestBookController

Kemudian kita buat view untuk menampilkanya. kita beri nama GuestBookList, strongly-typed, dan data classnya kita tambahkan IEnumerable karena data yang yang akan kita tampikan berupa list jadi modelnya harus bertipe IEnumerable.

Kemudian kita buat seperti ini.

Coba jalankan dengan menambahkan GuestBookList pada url (ex: http://localhost:2443/GuestBook/GuestBookList)

Kemudian kita tambahkan beberapa action seperti edit, details, dan delete pada halaman ini. kita tambahkan kolom action pada table header dan link action pada kolom bodinya.

table header

link actionya

Selanjutnya kita akan membuat implementasi untuk masing-masing action tersebut. Kita mulai dari yang paling mudah yaitu action details. action details ini menampilkan data berdasarkan id dari data tersebut, jadi kita akan membuat sebuah method yang mengambil data dari database berdasarkan id. Karena kita sudah mempunyai method GetData pada kelas reporsitory kita gunakan itu saja. kita hanya perlu membuat sebuah action result pada Controller.

Action in sama dengan action ThankYou yang telah kita buat, tetapi kita akan membuat sebuah view baru jadi kita harus membuat sebuah action baru. kemudian kita buat View. kita buat strongly-typed dan view content Details.

Setelah jadi kita hilangkan field Id pada view,dan kita ubah action-link pada Back to list dari Indek menjadi GuestBookList. buat seperti ini

Kemudian kita build dan coba jalankan lagi halaman GuestBookList.

halaman yang telah ditambahkan link action

Kita klik link details pada salah satu baris, maka akan masuk kehalaman details seperti dibawah ini, apabila kita klik pada back to list maka akan kembali kehalaman GuestBookList.

Action selanjutnya adalah action edit, action ini mengambil data berdasarkan id, kemudian ditampilkan untuk diedit lalu di save. Kita tambahkan action result pada controller untuk edit entry.

Kemudian kita buat View untuk edit. View Content nya pilih yang edit ya.

Kita edit view ini, kita hilangkan field id, karena tidak perlu edit Id, kemudian kita build dan jalankan lagi. Hasilnya akan seperti dibawah ini.

Namun apabila kita save, kita belum bisa menyimpan hasil perubahan data karena action kita hanya action GET saja, jadi hanya mengambil data, sedangkan untuk menyimpan kita memerlukan action POST. Jadi kita buat sebuah overload method edit pada controller dengaj jenis method POST.

Pada bagian akhir action kita tambahkan method RedirectToAction, jadi ketika action tersebut selesai maka kita akan menjalankan method details dengan inputan Id dari data yang kita edit tersebut. Hasilnya setelah kita save adalah seperti dibawah ini, kita langsung di-direct ke halaman details dari data yang telah kita edit.

Pada action result Edit, kita meng-assign nilai dari tiap-tiap field, hal ini tentu akan sangat merepotkan apabila fieldnya berjumlah banyak. Untungnya asp mvc mempunyai sebuah helper method yang bernama UpdateModel() pada cotroller base class. helper ini men-support updating properti-properti dari sebuah object yang kita pass. method edit kita akan seperti ini.

Action yang terakhir adalah action delete, action ini mengambil data berdasarkan id untuk kemudian dihapus. karena belum mepunyai method delete kita tambahkan dulu kedalam kelas reporsitory method delete.

Kemudian kita tambahkan action delete kedalam kelas controller. Action ini mengambil data berdasarkan id untuk kemudian ditampilkan kedalam view delete.

Kemudian kita tambahkan view untuk delete. Pilih strongly-typed ke GuestBookEntry dan view content delete.

Setelah selesai, hapus field untuk Id dan ubah action back to list dari Index menjadi GuestBookList. Kemudian kita coba build dan jalankan lagi. ketika kita klik link delete maka akan masuk kehalaman seperti ini

Tetapi kita masih belum bisa menghapus record tersebut dikarenkan action kita pada controller hanya berpua action get, jadi kita perlu membuat sebuah action tambahan yang bertipe POST, kita buat lagi action delete bertipe post.

Disini kita akan mereturn action kepada sebuah view (deleted) yang belum kita buat, yang akan berisi halaman konfirmasi bahwa record tersebut sudah terhapus. Kita buat view deleted. View ini tidak kita jadikan strongly-typed karena kita tidak membutuhkan model apapun untuk ditampilkan.

Kita buat seperti dibawah ini.

Setelah kita jalankan dan kita coba hapus sebuah record, maka hasilnya akan seperti ini.

Apabila kita kembali kehalaman list, maka record tersebut sudah terhapus.

Mungkin cukup sekian post kali ini. Semoga bermanfaat, selamat puasa dan sampai jumpa

kalau mau download sourcenya bisa disini http://code.google.com/p/guestbookpart4/source/browse/Blog.GuestBook.zip

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