{"id":2184,"date":"2015-03-27T03:16:19","date_gmt":"2015-03-27T03:16:19","guid":{"rendered":"http:\/\/blog.jaringanhosting.com\/?p=2184"},"modified":"2015-03-27T07:50:34","modified_gmt":"2015-03-27T07:50:34","slug":"asp-net-mvc-5-0-hosting-tutorial-jaringanhosting-com-4-tahap-sederhana-dalam-membangun-aplikasi-asp-net-mvc-5-0","status":"publish","type":"post","link":"https:\/\/blog.jaringanhosting.com\/index.php\/asp-net-mvc-5-0-hosting-tutorial-jaringanhosting-com-4-tahap-sederhana-dalam-membangun-aplikasi-asp-net-mvc-5-0\/","title":{"rendered":"ASP.NET MVC 5.0 Hosting Tutorial &#8211; JaringanHosting.com :: 4 Tahap Sederhana dalam Membangun Aplikasi  ASP.NET MVC 5.0"},"content":{"rendered":"<p style=\"text-align: justify\">Bagi Anda\u00a0sekalian yang masih pemula dalam dunia hosting, artikel kali ini diharapkan dapat membantu Anda\u00a0dalam\u00a0<strong>membangun aplikasi ASP.NET MVC 5.0<\/strong>. Seperti yang telah diketahui,\u00a0Model-View-Controller (MVC) merupakan pola perangkat lunak untuk mencapai isolasi antara komponen aplikasi yang berbeda. MVC terdiri dari pola yang memebntuk Model-View dan Controller yang dapat dijelaskan sebagai berikut:<\/p>\n<ul>\n<li><strong>Model<\/strong>: representasi dari struktur data dalam sebuah\u00a0sumber data misalnya Database.<\/li>\n<li><strong>View:<\/strong>\u00a0user interface atau\u00a0model yang disajikan bagi\u00a0pengguna akhir.<\/li>\n<li><strong>Controller: <\/strong>menerjemahkan masukan dari user\u00a0ke dalam\u00a0tindakan yang membentuk sebuah\u00a0model serta\u00a0mempersiapkan tampilan yang sesuai dengan tanggapan tersebut.<\/li>\n<\/ul>\n<p style=\"text-align: justify\">Terdapat pemisahan yang jelas antara logika operasi dan user interface merupakan salah satu syarat yang perlu dicapai oleh aplikasi\u00a0perangkat lunak (terutama aplikasi berbasis web). Oleh karena itu, Anda\u00a0dapat mencapai persyaratan ini dengan menggunakan desain MVC (Model View Controller) yang membuat aplikasi Anda\u00a0lebih fleksibel untuk\u00a0dirubah.<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/jaringanhosting.com\/Indonesia-ASP-NET-MVC-5-Hosting\"><img loading=\"lazy\" class=\"aligncenter wp-image-2195 size-full\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Banner-JH-e1427425943155.png\" alt=\"Banner-JH\" width=\"300\" height=\"250\" \/><\/a><\/p>\n<p style=\"text-align: justify\">ASP.NET MVC sendiri merupakan\u00a0kerangka kerja berdasarkan pola MVC (Model View Controller) yang didesain untuk membangun aplikasi web. Saat ini, Microsoft telah merilis versi baru dari kerangka kerja MVC\u00a0 yang dinamakan\u00a0MVC 5.0. MVC 5.0 diperkaya dengan fitur-fitur baru \u00a0yang mampu melengkapi fitur-fitur yang telah ada sebelumnya.\u00a0Untuk implementasi MVC 5.0, saya akan menggunakan Visual Studio Express 2013 for\u00a0Web dan Anda akan ditunjukkan beberapa tahap untuk membangun aplikasi <a href=\"http:\/\/jaringanhosting.com\/Indonesia-ASP-NET-MVC-5-Hosting\">ASP.NET MVC 5.0<\/a> yang sederhana.<\/p>\n<h4 style=\"text-align: justify\">1. Membuat MVC 5.0 project pada Visual Studio 2013<\/h4>\n<ul>\n<li>Buka aplikasi\u00a0Visual Studio Express 2013 for\u00a0Web dan buat\u00a0&#8220;New Project&#8221; dengan mengklik\u00a0&#8220;File -&gt; New Project.&#8221;<\/li>\n<li>Pilih template &#8220;ASP.NET Web Application&#8221; seperti yang ditunjukkan pada gambar berikut. Namakan project Anda sebagai &#8220;MyFirstMVC5App&#8221;, lalu pilih lokasi file\u00a0dan tekan tombol &#8220;OK&#8221;.<\/li>\n<\/ul>\n<p style=\"text-align: center\"><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject1.jpg\"><img loading=\"lazy\" class=\"alignnone wp-image-2185 size-full\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject1-e1427423265136.jpg\" alt=\"NewProject1\" width=\"954\" height=\"602\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject1-e1427423265136.jpg 954w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject1-e1427423265136-300x189.jpg 300w\" sizes=\"(max-width: 954px) 100vw, 954px\" \/><\/a><\/p>\n<ul>\n<li>Pada kotak\u00a0dialog berikutnya, pilih &#8220;MVC&#8221; sebagai template kemudian tekan\u00a0tombol &#8220;OK&#8221;.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject-MVC.jpg\"><img loading=\"lazy\" class=\"wp-image-2187 size-full aligncenter\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject-MVC-e1427424015705.jpg\" alt=\"NewProject-MVC\" width=\"765\" height=\"536\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject-MVC-e1427424015705.jpg 765w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/NewProject-MVC-e1427424015705-300x210.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Sebuah proyek ASP.NET MVC 5.o yang baru telah dibuat sebagai berikut. Anda dapat dengan mudah menemukan &#8220;Controller&#8221;, &#8220;Model&#8221; dan &#8220;Tampilan&#8221; folder dalam\u00a0explorer.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/New-Project-Welcome-Page.jpg\"><img loading=\"lazy\" class=\"aligncenter wp-image-2188 size-medium\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/New-Project-Welcome-Page-300x126.jpg\" alt=\"New Project Welcome Page\" width=\"300\" height=\"126\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/New-Project-Welcome-Page-300x126.jpg 300w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/New-Project-Welcome-Page-1024x431.jpg 1024w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/New-Project-Welcome-Page-720x300.jpg 720w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/New-Project-Welcome-Page.jpg 1221w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h4 style=\"text-align: justify\">2. Mempersiapkan sebuah Model<\/h4>\n<ul>\n<li>Dalam rangka mempersiapkan model, klik kanan pada &#8220;Model&#8221; folder dan pilih &#8220;Add&#8221;, kemudian &#8220;Class&#8221;.<\/li>\n<li>Namakan class\u00a0sebagai &#8220;Employee.cs&#8221;.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/PrepareModel.jpg\"><img loading=\"lazy\" class=\"wp-image-2189 size-full aligncenter\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/PrepareModel-e1427424287100.jpg\" alt=\"PrepareModel\" width=\"951\" height=\"593\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/PrepareModel-e1427424287100.jpg 951w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/PrepareModel-e1427424287100-300x187.jpg 300w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"lang:default decode:true \">public class Employee\r\n{\r\n    public string EmpID { get; set; }\r\n    public string EmpFirstName { get; set; }\r\n    public string EmpLastName { get; set; }\r\n}<\/pre>\n<ul>\n<li>\u00a0Seperti yang telah\u00a0dibahas sebelumnya bahwa &#8220;Model&#8221; adalah representasi dari struktur data dalam sebuah sumber data, sehingga Anda bisa berasumsi bahwa &#8220;Employee&#8221; class merupakan tabel Karyawan di database dengan kolom sebagai &#8220;EmpID&#8221;, &#8220;EmpFirstName&#8221;, &#8220;EmpLastName&#8221; dan\u00a0sebagainya.<\/li>\n<\/ul>\n<h4>3. Tambahkan sebuah Controller<\/h4>\n<ul>\n<li>Untuk menambahkan controller pada\u00a0project, klik kanan pada folder &#8220;Controller&#8221;, pilih &#8220;Add&#8221;, kemudian klik &#8220;Controller&#8221;.<\/li>\n<li>Pada dialog &#8220;Add Scaffold&#8221;, pilih &#8220;MVC 5 Controller &#8211; Empty&#8221; and tekan tombol\u00a0&#8220;Add&#8221; sebagi berikut:<\/li>\n<\/ul>\n<p><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddScaffold.jpg\"><img loading=\"lazy\" class=\"wp-image-2190 size-full aligncenter\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddScaffold-e1427424562216.jpg\" alt=\"AddScaffold\" width=\"949\" height=\"655\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddScaffold-e1427424562216.jpg 949w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddScaffold-e1427424562216-300x207.jpg 300w\" sizes=\"(max-width: 949px) 100vw, 949px\" \/><\/a><\/p>\n<p style=\"text-align: left\"><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddController.jpg\"><img loading=\"lazy\" class=\"wp-image-2191 size-full aligncenter\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddController-e1427424628724.jpg\" alt=\"AddController\" width=\"596\" height=\"166\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddController-e1427424628724.jpg 596w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddController-e1427424628724-300x83.jpg 300w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/a><\/p>\n<ul>\n<li>Namakan controller sebagai &#8220;EmployeeController&#8221; dalam dialog berikutnya dan tekan &#8220;Add&#8221;. Sebuah controller baru akan ditambahkan ke \u00a0folder &#8220;Controller&#8221;. Kode controller yang dihasilkan adalah sebagai berikut:<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">namespace MyFirstMVC5App.Controllers\r\n{\r\n    public class EmployeeController : Controller\r\n    {\r\n        \/\/ GET: \/Employee\/\r\n        public ActionResult Index()\r\n        {\r\n            return View();\r\n        }\r\n    }\r\n}<\/pre>\n<p>Ada beberapa hal penting yang perlu Anda pahami, yaitu:<\/p>\n<ul>\n<li>EmployeeController mewarisi dari kelas dasar Controller yang\u00a0memiliki metode bernama Index (). Metode Indeks () ini akan menjadi metode standar t ketika mengakses controller\u00a0sebagai (http: \/\/ localhost: xxxx \/Employee\u00a0\/).<\/li>\n<li>Dalam rangka untuk menghasilkan respon HTML, metode\u00a0Index () menggunakan tampilan template yang diwakilkan dalam bentuk kode sebagai &#8220;return View ();&#8221;<\/li>\n<li>Setelah kita membuat controller, sebuah folder baru akan dibuat dalam &#8220;Views&#8221; yang disebut sebagai &#8220;Employee&#8221;.<\/li>\n<\/ul>\n<h4>4. Tambahkan View<\/h4>\n<ul>\n<li>Yang terakhir, untuk menambahkan tampilan, klik kanan pada folder &#8220;Employee&#8221; seperti di bawah ini, pilih &#8220;Add&#8221;, kemudian &#8220;MVC 5 View Page (Razor)&#8221;. Tentukan nama untuk tampilan misalnya &#8220;Indeks&#8221; sebagai berikut:<\/li>\n<\/ul>\n<p style=\"text-align: center\"><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddView-e1427425078576.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2192\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddView-e1427425078576.jpg\" alt=\"AddView\" width=\"398\" height=\"125\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddView-e1427425078576.jpg 398w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/AddView-e1427425078576-300x94.jpg 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/a><\/p>\n<ul>\n<li>Sebuah file baru dengan nama &#8220;Index.cshtml&#8221; akan ditambahkan sebagai\u00a0&#8220;Views&gt; Employee&#8221; folder. Saya mencoba untuk menambahkan teks sample\u00a0untuk halaman ini seperti yang ditunjukkan pada gambar di bawah.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Viewcshtml.jpg\"><img loading=\"lazy\" class=\"size-large wp-image-2193 aligncenter\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Viewcshtml-1024x413.jpg\" alt=\"Viewcshtml\" width=\"1024\" height=\"413\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Viewcshtml-1024x413.jpg 1024w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Viewcshtml-300x121.jpg 300w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Viewcshtml.jpg 1201w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p style=\"text-align: justify\">Sekarang, kita sudah selesai menciptakan aplikasi ASP.NET MVC 5.0 sederhana. Untuk menjalankan aplikasi, klik CTRL + F5. Hasilnya akan tampil sebagai berikut:<\/p>\n<p><a href=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Output.jpg\"><img loading=\"lazy\" class=\"wp-image-2194 size-full aligncenter\" src=\"http:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Output-e1427425323309.jpg\" alt=\"Output\" width=\"787\" height=\"307\" srcset=\"https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Output-e1427425323309.jpg 787w, https:\/\/blog.jaringanhosting.com\/wp-content\/uploads\/2015\/03\/Output-e1427425323309-300x117.jpg 300w\" sizes=\"(max-width: 787px) 100vw, 787px\" \/><\/a><\/p>\n<p style=\"text-align: justify\"><span style=\"color: #111111\">Sekarang coba ubah URL dalam browser (<em>http:\/\/localhost:11517\/Employee\/)\u00a0<\/em>dan tekan enter, kemudian akan didapatkan output yang selalu sama. Sudah jelas disini\u00a0bahwa request telah diset oleh controller, dalam kasus ini yaitu\u00a0EmployeeController dan kontroler tersebut membuat View\u00a0(Index.cshtml yang telah dibuat dalam folder Views-&gt; Employee) yang dapat terlihat oleh Anda di browser.<\/span><\/p>\n<p style=\"text-align: justify\">Sekian tahap-tahap dalam\u00a0<strong>membangun aplikasi ASP.NET MVC 5.0 menggunakan Visual Studio 2013 for Web<\/strong> yang dapat saya bagikan untuk Anda. Semoga Anda berhasil! Untuk urusan <a href=\"http:\/\/jaringanhosting.com\/Indonesia-ASP-NET-MVC-5-Hosting\">ASP.NET MVC 5.0 Hosting<\/a>, JaringanHosting.com menyediakan paket ASP.NET MVC 5.0 yang terbaik, terpercaya dan sesuai dengan kebutuhan Anda.\u00a0<span style=\"color: #312a1e\">Tim <a href=\"http:\/\/jaringanhosting.com\/Indonesia-ASP-NET-MVC-5-Hosting\">JaringanHosting.com<\/a> yang handal dan berpengalaman akan selalu melayani dengan hasil yang sangat memuaskan.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bagi Anda\u00a0sekalian yang masih pemula dalam dunia hosting, artikel kali ini diharapkan dapat membantu Anda\u00a0dalam\u00a0membangun aplikasi ASP.NET MVC 5.0. Seperti yang telah diketahui,\u00a0Model-View-Controller (MVC) merupakan pola perangkat lunak untuk mencapai isolasi antara komponen aplikasi yang berbeda. MVC terdiri dari pola<\/p>\n","protected":false},"author":6456,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/2184"}],"collection":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/users\/6456"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/comments?post=2184"}],"version-history":[{"count":0,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/2184\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/media?parent=2184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/categories?post=2184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/tags?post=2184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}