Tampilkan postingan dengan label ASP. Tampilkan semua postingan
Tampilkan postingan dengan label ASP. Tampilkan semua postingan

Kamis, 09 Januari 2014

MongoDB ASP MVC

 Sebelumnya apa sih itu mongoDB? apakah database yang dibuat oleh orang jawa? buka, mongoDB adalah NoSQL Database. MoongoDB adalah Non relational database, yang menyimpan data dalam bentuk JSON

Apasih keunggulan dari mongoDB? kelebihan mongoDB antara lain
  1. MongoDB merupakan sistem basis data yang menggunakan konsep key-value, yaitu setiap dokumen dalam MongoDB pasti memiliki key. Saat membuat dokumen tanpa menggunakan sebuah primary key, secara otomatis MongoDB akan memberikan sebuah key. Key-value ini berperan penting karena membuat sistem basis data pada MongoDB semakin lebih cepat dibandingkan dengan non key-value seperti RDBMS.
  2. MongoDB mendukung replikasi. Repiklasi ini dapat membuat pemilik sistem yang memiliki trafik membaca tinggi akan sangat terbantu ketika sistemnya menggunakannya.
  3. MongoDB juga mendukung Sharding. Sharding digunakan ketika memiliki website yang sudah sangat besar jumlah penggunaannya, datanya dapat mencapai jutaan giga byte. Dengan penggunakan sharding ini akan dikerjakan dengan membaris-baris data dengan per regional.
  4. MongoDB mendukung modul pemograman MapReduce. Yaitu sebuah konsep yang sangat fenomenal yang pernah dikeluarkan oleh Google dan saat ini banyak diimplementasikan seperti pada Apache Hadoop. MapReduce membantu ketika melakukan operasi agregasi. Dimana semua entry datangnya dari collection dan outputnya akan menjadi collection juga. Pada MySQL biasanya menggunakan query Group By.
  5. MongoDB mendukung bahasa pemograman C, C++, C#, Erlang, Haskell, Java, JavaScript, .NET (C#F#, PowerShell), Lips, PHP, Python, Ruby, dan Scala.
  6. Cross-platform. MongoDB akan dapat digunakan di Windows, Linux, OS X, dan Solarus.
  7. Proses CRUD (create, read, update, dan delete) terasa ringan.
  8. GridFS. GridFS ini digunakan untuk menyimpan data yang sangat besar.   

Cukup basa-basinya :p, untuk mendapatkan mongoDB kita bisa download disini, untuk cara install bisa lihat vidio ini 


Setelah selesai install mongo, kita akan mencoba memasukan data kedalam database. yang pertama kita lakukan adalah menjalankan database server dari mongo. Buka Command Prompt, jalankan sebagai administrator. ketikan mongod pada command prompt.



Mongodb akan berjalan pada default port-nya yaitu port 27017. Setelah server berjalan kita akan coba memasukan data base. buka kembail command prompt baru, jalankan sebagai administrator. ketikan mongo
 Secara default mongo mempunyai sebuah database bernama test, kita akan memasukan data pada database ini.

pada mongodb data yang dimasukan berupa sebuah Collection, collection adalah kumulan dari Json document yang bisa digunakan secara langsung pada mongodb. kita akan membuat sebuah collection bernama persons. untuk memasukan data pada kita tulis seperti gambar dibawah ini



gambar diatas mengandung arti bahwa kita memasukan sebuah data pada collection person yang berisi name dengan value "Ridwan" dan bahasa dengan value "C#". kita masukan lagi data baru


kita mempunyai dua buah data pada collection person dengan nama "Ridwan" dan "Fansuri". Untuk melihat data tersebut, kita tulis db.persons.find().pretty() pada cmd seperti gambar dibawah


Kita telah memiliki data pada database, selanjutnya adalah menampilkan data tersebut. Kita akan menampilkan data tersebut menggunakn ASP MVC. buat project ASP MVC 4, berinama yang anda suka.
Setelah buat project kita add MongoDbdriver menggunakan nuget package 


Driver telah terpasang, sekarang tinggal kita tampilkan data dari mongoDB

Add sebuah class baru pada model, beri nama Person tuliskan seperti code dibawah


  public class Person
    {
        public ObjectId _id { get; set; }
        public string name { get; set; }
        public string bahasa { get; set; }
    }
Kemudian kita akan menghubungkan database dengan aplikasi. kita tambahkan sebuah variable pada appSetting di webconfig, tuliskan seperti ini



Kita akan mebuat sebuah Repository Class untuk menghubungkan aplikasi dengan database. Tambahkan sebuah folder baru pada project, beri nama Repository. Pada folder tersebut tambahkan class baru, beri nama HomeRepository. Tuliskan code dibawah pada class HomeRepository

  public static class HomeRepository
    {
        static readonly MongoServer Server = MongoServer.Create(ConfigurationManager.AppSettings["connectionString"]);
        private static MongoDatabase _myDb = Server.GetDatabase("test");

        public static List GetPersons()
        {
            var persons = _myDb.GetCollection("persons");
            var personList = persons.FindAll().Select(person => new Person()
                {
                    _id = person._id, bahasa = person.bahasa, name = person.name
                }).ToList();

            return personList;
        }  

    }

class ini kita buat static agar kita tidak perlu meng-inisialisai kelas tersebut. Class ini terdapat sebuh method bernama GetPersons() yang akan mengembalikan sebuah list Person.

setelah HomeRepository dibuat. sekarang kita akan menampilkan data tersebut kedalam halaman web. Buka HomeController, rubah action index menjadi seperti dibawah

 public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
            var model = HomeRepository.GetPersons();
            return View(model);
        }
Action tersebut mengirimkan model berupa List kedalam halaman Index. untuk menampilkan pada halaman Index, kita ubah code pada halaman Index pada view home menjadi seperti dibawah ini

Kita coba build dan jalankan. makan akan data yang telah kita simpan akan ditampikan pada halaman home

Mungkin cukup sekian tulisan kali ini, project-nya bisa di download disini


Sabtu, 02 November 2013

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

Selasa, 15 Oktober 2013

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

Minggu, 22 Juli 2012

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