Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

Ebook Seri Belajar ASP.NET : Pengenalan ASP.NET Web API

Akhirnya ebook sederhana sebanyak 86 halaman ini selesai juga. Ebook ini merupakan Seri Belajar ASP.NET yang kali ini membahas tentang ASP.NET Web API.  Ebook ini memperkenalkan dasar-dasar yang semoga bisa membantu software developer untuk membuat layanan HTTP dengan mudah.  Ada tiga bagian utama yang dibahas pada ebook ini yaitu :

  1. Pembahasan pembuatan Web API berdasarkan template project yang telah disediakan pada Visual Studio, cara akses Web API yang telah dibuat dengan tool test client.
  2. Contoh-contoh kasus Web API.
  3. Pembuatan program dengan beberapa platform dari aplikasi console dan aplikasi web untuk mengakses Web API yang telah dibuat sebelumnya.

Berikut adalah hal-hal yang dibahas pada ebook ini :

  1. Pendahuluan.
    • Web Service.
    • ASP.NET dan Visual Studio 2013.
  2. Perkenalan.
    • Project Web API.
    • Web API pada Existing Project Web.
      • ASP.NET Web Form Web Application.
      • ASP.NET MVC Web Application.
      • ASP.NET Web Form Website.
    • Halaman Bantuan ASP.NET Web API.
    • HTTP Verb.
    • Mengakses Web API.
      • A Simple Test Client for ASP.NET Web API.
  3. Contoh-Contoh Web API.
    • API Matematika.
    • API CRUD – LINQ to SQL.
    • API CRUD – Entity Framework.
  4. Pemrograman Aksee Web API.
    • Matematika.Console.
    • Mahasiswa.Console.
    • Mahasiswa.Website.
  5. Penutup.

Untuk mengunduh ebook ini dapat menggunakan link di bawah ini :

Versi 1 : http://1drv.ms/1hiarK7

Sumber : http://www.rezafaisal.net/?p=1142

Share this post: | | | |
ASP.NET Web API : Penggunaan GET, POST, PUT dan DELETE

Pada kode Web API yang telah dilihat pada posting-posting sebelumnya akan kita lihat seperti berikut ini :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace ASPNET.WebForm.WebApp.Controllers
{
public class ValuesController : ApiController
{
// GET api/<controller>
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}

// GET api/<controller>/5
public string Get(int id)
{
return "value";
}

// POST api/<controller>
public void Post([FromBody]string value)
{
}

// PUT api/<controller>/5
public void Put(int id, [FromBody]string value)
{
}

// DELETE api/<controller>/5
public void Delete(int id)
{
}
}
}

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4 kelompok berdasarkan HTTP verb yaitu :

  1. GET, dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk mengambil atau membaca data.  Method pada kelompok ini biasanya mengembalikan suatu keluaran/output yang kadang bisa disebut sebagai function.
  2. POST, dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk membuat (create) item/resource baru.  Kelompok method ini biasanya tidak mengembalikan keluaran/output yang kadang disebut procedure.
  3. PUT, dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk mengupdate item/resource yang telah ada. (idem dengan point 2).
  4. DELETE, dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk menghapus item/resource yang telah ada. (idem dengan point 2).

Pada posting berikutnya akan diterangkan contoh Web API untuk proses CRUD pada database.

Share this post: | | | |
Posted: Apr 03 2014, 01:32 PM by reyza | with no comments
Filed under: , , ,
Mengakses dan Menguji Web API dengan Tool A Simple Test Client for ASP.NET Web API

Pada posting sebelumnya http://www.rezafaisal.net/?p=1125 telah di bahas tentang halaman bantuan dimana pada halaman tersebut kita dapat melihat class controller apa saja yang ada pada project dan method-method apa saja yang terdapat pada setiap class. 

Tetapi bagi yang ingin mencoba menggunakan fungsi-fungsi tersebut harus tetap melakukan akses langsung masing-masing method pada class controller via url baik yang bisa dilakukan dengan akses web browser atau secara memrograman.  Pada posting ini akan dibahas bagaimana mengakses dan menguji method pada class controller Web API dengan bantuan “A Simple Test Client for ASP.NET Web API”.  Tool ini nantinya akan diintegrasikan dengan halaman bantuan Web API.

Berikut adalah langkah-langkah yang dapat dilakukan :

{Installasi A Simple Test Client for ASP.NET Web API}

Untuk menambahkan “tool” ini pada project web adalah dengan cara akses fitur Manage NuGet Packages, dengan cara klik kanan pada project yang diinginkan kemudian pilih fitur tersebut.

Keyword yang bisa digunakan adalah WebApiTestClient, maka akan didapat daftar seperti di atas, kemudian klik tombol Install.

Selajutnya modifikasi file Api.cshtml yang terdapat pada folder Areas\HelpPage\Views\Help.

   1: @using System.Web.Http
   2: @using ASP.Areas.HelpPage.Models
   3: @model HelpPageApiModel
   4:  
   5: @{
   6:     var description = Model.ApiDescription;
   7:     ViewBag.Title = description.HttpMethod.Method + " " + description.RelativePath;
   8: }
   9:  
  10: <link type="text/css" href="~/Areas/HelpPage/HelpPage.css" rel="stylesheet" />
  11: <div id="body" class="help-page">
  12:     <section class="featured">
  13:         <div class="content-wrapper">
  14:             <p>
  15:                 @Html.ActionLink("Help Page Home", "Index")
  16:             </p>
  17:         </div>
  18:     </section>
  19:     <section class="content-wrapper main-content clear-fix">
  20:         @Html.DisplayForModel()
  21:     </section>
  22: </div>
  23: @Html.DisplayForModel("TestClientDialogs")
  24: @section Scripts {
  25:     @Html.DisplayForModel("TestClientReferences")
  26:     <link type="text/css" href="~/Areas/HelpPage/HelpPage.css" rel="stylesheet" />
  27: }

Dan tambahkan baris ke-23 sampai baris ke-27 ke halaman Api.cshtml tersebut.

{Testing}

Maka akan dapat dilihat akan terdapat tambahan tombol “Test API” pada pojok kiri bawah pada halaman bantuan ketika kita mengakses bantuan dari suatu method pada class controller.

Dan berikut adalah tampilan ketika tombol “Test API” diklik, akan tampil window seperti pada gambar di bawah.

Dan berikut adalah hasil yang dapat dilihat ketika tombol Send diklik. Selain hasil output body juga dapat dilihat status dan header dari response method yang sedang kita akses tersebut.

Selamat mencoba :)

Share this post: | | | |
Posted: Mar 27 2014, 11:39 AM by reyza | with no comments
Filed under: , , ,
Menambahkan Halaman Bantuan ASP.NET Web API pada Aplikasi ASP.NET Web Form

Jika kita membuat aplikasi web dengan tempate Web API dengan langkah-langkah seperti berikut ini :

Maka hasilnya dapat dilihat pada area Solution Explorer seperti berikut ini :

Pada project ini selain terdapat class-class dan file-file utama Web API juga terdapat file-file pendukung seperti halaman web sebagai landing page dan help.  Sehingga jika kita “menjalankan” project ini dengan cara klik kanan pada project WebAPI yang ada pada Solution Explorer kemudian pilih Debug > Start new instance, akan dapat dilihat hasil seperti di bawah ini. Halaman di bawah ini adalah halaman utama.

Halaman di bawah ini adalah halaman bantuan yang akan menampilkan class-class controller yang telah dibuat dan method-method yang dimiliki oleh setiap class controller tersebut.

Sebagai informasi, project yang dibuat dengan cara di atas adalah aplikasi web ASP.NET MVC Web Application. 

Nah jika kita telah mempunyai aplikasi web ASP.NET Web Form dan ingin mempunyai halaman bantuan seperti yang sudah diperlihatkan di atas maka dapat dilakukan langkah-langkah seperti berikut ini.  Langkah-langkah berikut ini dicoba pada project ASP.NET Web Form Web Application.

{Installasi paket Microsoft.AspNet.WebApi.HelpPage}

Klik kanan pada project kemudian klik Manage NuGet Packages. Pilih Microsoft ASP.NET Web API 2.1 Help Page dan klik tombol Install.

Setelah proses pengunduhan selesai akan dilakukan proses installasi, dengan cara klik tombol I Accept pada window License Acceptance.

Hasilnya dapat dilihat pada tambahan folder dan file pada project yang dapat dilihat pada area Solution Explorer pada gambar berikut ini.

{Konfigurasi}

Selanjutnya adalah menambahkan baris berikut ini pada file Global.asax.cs, yaitu pada baris ke-9 dan baris ke-17.

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.Web.Http;
   6: using System.Web.Security;
   7: using System.Web.SessionState;
   8: using ASPNET.WebForm.WebApp.App_Start;
   9: using System.Web.Mvc;
  10: namespace ASPNET.WebForm.WebApp
  11: {
  12:     public class Global : System.Web.HttpApplication
  13:     {
  14:         protected void Application_Start(object sender, EventArgs e)
  15:         {
  16:             GlobalConfiguration.Configure(WebApiConfig.Register);
  17:             AreaRegistration.RegisterAllAreas(); 
  18:         }
  19:     }
  20: }

{Cara Akses}

Untuk melihat halaman ini maka cukup dengan “menjalankan” aplikasi web ini kemudian akses dengan url berikut ini : http://[nama_domain]/Help/ dan berikut adalah hasilnya.

{ASP.NET Web Form WebSite}

Cara yang hampir sama juga dapat dilakukan jika ingin menambahkan halaman bantuin ini pada aplikasi web ASP.NET Web Form Website. Yang berbeda adalah pada bagian konfigurasi pada file Global.asax seperti di bawah ini, yaitu pada baris ke-7.

   1: <%@ Application Language="C#" %>
   2:  
   3: <script runat="server">
   1:  
   2:  
   3:     void Application_Start(object sender, EventArgs e) 
   4:     {
   5:         // Code that runs on application startup
   6:         WebApiConfig.Register(System.Web.Http.GlobalConfiguration.Configuration);
   7:         System.Web.Mvc.AreaRegistration.RegisterAllAreas(); 
   8:     }
   9:     
  10:     void Application_End(object sender, EventArgs e) 
  11:     {
  12:         //  Code that runs on application shutdown
  13:  
  14:     }
  15:         
  16:     void Application_Error(object sender, EventArgs e) 
  17:     { 
  18:         // Code that runs when an unhandled error occurs
  19:  
  20:     }
  21:  
  22:     void Session_Start(object sender, EventArgs e) 
  23:     {
  24:         // Code that runs when a new session is started
  25:  
  26:     }
  27:  
  28:     void Session_End(object sender, EventArgs e) 
  29:     {
  30:         // Code that runs when a session ends. 
  31:         // Note: The Session_End event is raised only when the sessionstate mode
  32:         // is set to InProc in the Web.config file. If session mode is set to StateServer 
  33:         // or SQLServer, the event is not raised.
  34:  
  35:     }
  36:        
</script>

Selamat mencoba

Sumber : http://www.rezafaisal.net/?p=1125.

Share this post: | | | |
Debugging VS2013 Websites Using 64-bit IIS Express

Ketika aplikasi web dijalankan atau didebug pada Visual Studio 2013 maka akan dijalankan IIS Express dan secara default digunakan IIS Express 32-bit (hal ini juga berlakuk pada visual studio versi lain yang menggunakan IIS Express). Dengan lingkungan 32-bit, ada kemungkinan kita akan mendapatkan pesan seperti berikut ini :

Hal ini terjadi ketika “library” yang digunakan adalah untuk lingkungan 64-bit sedangkan IIS Express yang digunakan adalah 32-bit.

Jika ingin mengubah lingkungan IIS Express yang digunakan menjadi 64-bit maka dapat dilakukan beberapa cara, yaitu :

{perintah command line}

reg add HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\12.0\WebProjects /v Use64BitIISExpress /t REG_DWORD /d 1

{Redit}

Jalankan regedit, kemudian cari bagian di bawah ini :

HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\12.0\WebProjects

Dan ubah bagian Use64BitIISExpress menjadi 1 seperti pada gambar berikut ini :

Sekarang jika kita “menjalankan/debug” aplikasi web pada Visual Studio maka akan diaktifkan IIS Express 64-bit.

Selamat mencoba.

Sumber : http://www.rezafaisal.net/?p=1103

Share this post: | | | |
Posted: Mar 24 2014, 01:48 PM by reyza | with no comments
Filed under: , , ,
Simple PDF to Image Converter with ASP.NET

Pada posting ini akan dicoba menerangkan langkah demi langkah untuk membuat converer file format PDF menjadi gambar. Hal ini kadang diperlukan pada aplikasi web dapat langsung menampilkan secara langsung file yang diupload (dalam kasus ini adalah file PDF) tanpa harus meinstall plugin. Maka dibuatlah converter yang mengubah file PDF yang diupload menjadi file PNG (image), sehingga nanti jika user ingin melihat file yang sudah diupload cukup disajikan file gambar hasil dari proses convert tersebut.

Untuk membuat converter sederhana ini digunakan library Magick.NET  (https://magick.codeplex.com/) dan juga diperlukan Ghostscript (http://www.ghostscript.com/download/gsdnld.html).

{Persiapan}

Langkah pertama, adalah menginstall Ghostscript dari link di atas pada komputer yang menjadi web server.

Langkah kedua, adalah meinstall library Magick.NET. Cara paling gampang untuk ini adalah via fitur Manage NuGet Package. Pada window Manage NuGet Package, masukkan magick pada kolom pencarian dan akan dapat dilihat daftar seperti berikut ini.

Pilih salah satu dari Magick.NET-Q16, kemudian klik tombol install.

{Pemrograman}

Selanjutnya adalah menyiapkan satu halaman Web Form seperti berikut ini.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContohPdfConverter.aspx.cs" Inherits="Test_ContohPdfConverter" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload_FilePdf" runat="server" />
<asp:Button ID="Button_Convert" OnClick="Button_Convert_Click" runat="server" Text="PDF to JPG" />
</div>
</form>
</body>
</html>

Dan berikut ini adalah isi class code behind dari file aspx tersebut :

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.Web.UI;
   6: using System.Web.UI.WebControls;
   7:  
   8: using ImageMagick;
   9:  
  10: public partial class Test_ContohPdfConverter : System.Web.UI.Page
  11: {
  12:     protected void Page_Load(object sender, EventArgs e)
  13:     {
  14:  
  15:     }
  16:     protected void Button_Convert_Click(object sender, EventArgs e)
  17:     {
  18:         string folderpdf = "/Files/Pdf/";
  19:         string folderpng = "/Files/Png/";
  20:  
  21:         if (FileUpload_FilePdf.HasFile)
  22:         {
  23:             string filename = GetFileName(FileUpload_FilePdf.FileName);
  24:             string filepdf = Server.MapPath("~" + folderpdf) + filename;
  25:             string filepng = Server.MapPath("~" + folderpng) + filename + ".png";
  26:             FileUpload_FilePdf.SaveAs(filepdf);
  27:  
  28:             MagickReadSettings settings = new MagickReadSettings();
  29:             settings.Density = new MagickGeometry(100, 100);
  30:  
  31:             using (MagickImageCollection images = new MagickImageCollection())
  32:             {
  33:                 images.Read(filepdf, settings);
  34:                 MagickImage horizontal = images.AppendHorizontally();
  35:                 horizontal.Write(filepng);
  36:             }
  37:         }
  38:     }
  39:  
  40:     public static string GetFileName(string filename)
  41:     {
  42:         string prefixname = String.Empty;
  43:  
  44:         prefixname = DateTime.Now.ToString("yyyyMMdd-HHmmss-") + DateTime.Now.Millisecond.ToString();
  45:         filename = prefixname + "-" + filename.Replace(" ", "");
  46:  
  47:         return filename;
  48:     }
  49: }

Untuk menggunakan library Magick.NET maka pada kode perlu ditambahkan baris seperti pada baris ke-8.

Pada kode di atas akan mempunyai alur kerja seperti berikut :

  • File PDF akan diupload ke folder ~/Files/Pdf/ yang ada pada root folder dari aplikasi web. Nama file yang diupload akan disesuaikan dengan cara memanggil method GetFileName, dimana format nama file akan ditambahkan time stamp sebagai prefix.
  • File image akan disimpan dengan format PNG yang akan disimpan pada folder ~/Files/Png/ dengan nama sesuai dengan nama file PDF yang diupload dengan ditampkan “.png” di belakangnya.  Sehingga jika nama file pdf yang telah diupload adalah 20140321-122246-882-garuda-bjm-sby-20140329.pdf maka nama file png yang akan disimpan adalah 20140321-122246-882-garuda-bjm-sby-20140329.pdf.png.
  • Kemudian setelah file pdf sukses disimpan dilanjutkan dengan proses konversi dari PDF ke PNG dengan cara seperti yang dapat dilihat pada kode pada baris ke-28 sampai ke-38.

Pada baris ke-28 dan ke-29 adalah untuk menentukan setting dari hasil yang diinginkan, salah satunya adalah menentukan kualitas dari output yang diinginkan. Semakin tinggi angka density tersebut maka semakin besar dimensi image (pixel widthxheight) yang dihasilkan. Kemudian dengan class MagickImageCollection akan dilakukan proses membaca file PDF seperti yang terlihat pada baris ke-33.

Sedangkan pada baris ke-34 ditentukan bagaimana format dari output yang dihasilkan, pada contoh tersebut digunakan method AppendHorizontally yang nanti akan menghasilkan hasil yang menyamping. Artinya jika file PDF terdiri atas 3 halaman, ketiga halaman tersebut akan dibuat bersusun ke samping dari kiri ke kanan pada gambar. Jika ingin mendapatkan hasil dimana ketiga file itu tersusun dari atas ke bawah maka baris ke-34 tersebut dapat diganti menjadi seperti berikut :

   1: using (MagickImageCollection images = new MagickImageCollection())
   2: {
   3:     images.Read(filepdf, settings);
   4:     MagickImage horizontal = images.AppendVertically();
   5:     horizontal.Write(filepng);
   6: }

Dan yang terakhir adalah menulis hasil proses baca tadi dengan ke file seperti yang dapat dilihat pada baris ke-5 di atas.

Selamat mencoba.

Sumber : http://www.rezafaisal.net/?p=1090

Share this post: | | | |
Posted: Mar 21 2014, 03:33 PM by reyza | with no comments
Filed under: , ,
Enforcing SSL in a Web API Controller

Pada posting sebelumnya telah diterangkan bagaimana menambahkan Web API Controller pada project website ASP.NET Web Form (http://www.rezafaisal.net/?p=1049). Pada posting yang lain juga diterangkan bagaimana mengaktifkan SSL pada IIS Express via Visual Studio 2013 http://www.rezafaisal.net/?p=1064.

Untuk mengamankan Web API yang telah dibuat, maka langkah awal yang dapat dilakukan adalah “menempatkan” Web API Controller agar hanya dapat diakses pada jalur SLL. Pada posting ini akan diterangkan langkah-langkah agar Web API Controller yang telah dibuat hanya dapat diakses lewat jalur HTTPS saja.

Langkah pertama adalah membuat class HarusPakaiHttpsAttribute yang nantinya dapat digunakan sebagai tambahan atribut pada class Web API Controller, jika bekerja pada project Website maka class ini harus berada pada folder App_Code, sedangkan jika digunakan berikut adalah kode dari class HarusPakaiHttpsAttribute :

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Net.Http;
   5: using System.Web;
   6: using System.Web.Http.Controllers;
   7: using System.Web.Http.Filters;
   8:  
   9: public class HarusPakaiHttpsAttribute : AuthorizationFilterAttribute
  10: {
  11:     public override void OnAuthorization(HttpActionContext actionContext)
  12:     {
  13:         if (actionContext.Request.RequestUri.Scheme != Uri.UriSchemeHttps)
  14:         {
  15:             actionContext.Response = new HttpResponseMessage(System.Net.HttpStatusCode.Forbidden)
  16:             {
  17:                 ReasonPhrase = "HTTPS Required"
  18:             };
  19:         }
  20:         else
  21:         {
  22:             base.OnAuthorization(actionContext);
  23:         }
  24:     }
  25:  
  26: }

Langkah kedua cukup cukup menambahkan atribut [HarusPakaiHttps] pada method yang ada pada class Web API Controller.  Dari nama atribut [HarusPakaiHttps] dapat kita tebak bahwa nama atribut itu sesuai dengan nama class pada baris ke-9.

Nah berikut ini adalah contoh penggunakan atribut pada method :

[HarusPakaiHttps]
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}

Dengan memberikan atribut tersebut maka hanya method itu saja yang harus diakses via jaluar HTTPS. Sedangkan method-method lain yang tidak menggunakan atribut tersebut masih dapat diakses lewat jalur HTTP.

Jika ingin semua method yang ada pada class Web API Controller harus diakses via jaluar HTTPS, maka kita dapat tambakan atribut tersebut pada class seperti pada contoh berikut ini :


[HarusPakaiHttps]
public class GeekController : ApiController
{
}

Jika ingin mecobanya pada IIS Express di Visual Studio 2013, maka jangan lupa aktifkan terlebih dahulu jaluar SSL seperti yang telah diterangkan pada link di atas.

Berikut adalah contoh response yang akan dilihat jika salah satu method pada class Web API Controller diakses bukan pada jalur HTTPS.

Dan method-method tersebut akan dapat kembali memberikan respon setelah diakses via jaluar HTTPS. Tetapi tentu saja terlebih dahulu kita akan melihat peringatan seperti berikut ini.

Dan response akan dapat kita lihat setelah mengklik link “Continue to this website (not recommended).

Selamat mencoba.

Sumber : http://www.rezafaisal.net/?p=1085

Share this post: | | | |
Posted: Mar 20 2014, 09:09 PM by reyza | with no comments
Filed under: , , , ,
ASP.NET : Single Page Application Template

Pada aplikasi web yang sudah biasa kita temui biasanya kita dapat lihat terdapat perubahan pada address bar pada web browser.  Biasanya perubahan tersebut karena link/tombol yang diklik mengantarkan ke suaatu halaman yang lain atau mengirimkan suatu parameter.  Perubahan halaman atau parameter tentu saja akan membuat perubahan antarmuka yang kita lihat pada web browser.

Baik ASP.NET Web Form atau ASP.NET MVC biasanya mempunyai “prilaku” seperti itu, yaitu antarmuka atau halaman akan dapat berubah karena perubahan alamat pada address bar pada web browser.  Hal ini sesuai dengan life cycle yang terlihat pada gambar di bawah ini.

Nah pada perkembangannya terdapat istilah baru dalam teknologi yaitu Single Page Application (SPA). Apa bedanya antara aplikasi web yang telah disebutkan sebelumnya dengan SPA? Secara kasat mata atau apa yang dilihat oleh mata, maka perbedaannya terletak pada address bar pada browser dan antarmuka yang ditampilkan pada layar web browser. Sebagai ilustrasi maka bisa dilihat pada gambar di bawah ini :

Pada gambar di atas alamat pada address bar adalah http://localhost:2191 dengan antarmuka yang menampilkan form login. Kemudian jika diklik link Register maka akan ditampilkan halaman seperti berikut :

Dapat diperhatikan alamat pada address bar tetap sama, tapi antarmuka yang ditampilkan berbeda dengan sebelumnya. Dan berikut ini adalah tampilan setelah login.

Nah setelah melihat contoh di atas maka kita sudah mengetahui perbedaan secara kasat mata antara SPA dan aplikasi web sebelumnya. Pada SPA, dianggap terdapat 1 halaman saja (dilihat pada address bar) tetapi satu halaman tersebut bisa mempunyai banyak antarmuka sesuai dengan request yang dilakukan oleh user (sebagai contoh saat klik link register).

Perbedaan lain SPA dengan aplikasi web sebelumnya jika dilihat dari life cycle dapat digambarkan di bawah ini :

Bisa dilihat berbedaannya, jika pada aplikasi web sebelumnya yang dipertukarkan adalah kode HTML dari saat inisial request dan proses-proses selanjutnya. Sedangkan pada SPA, proses penerimaan kode HTML hanya terjadi diawal inisial request saja, dan selanjutnya cukup melakukan pertukaran data dalam bentuk JSON dengan bantuan AJAX. Untuk komunikasi antara HTML dan JSON, digunakan framework Javascript yang bermana Knockout.js.  Hal ini bisa dilihat pada gambar arsitektur SPA Template di bawah ini :

Pada posting selanjutkan akan di bahas lebih jaun mengenai SPA.

Share this post: | | | |
Akses ASP.NET web via jalur HTTPS pada IIS Express

Pada Visual Studio 2013 telah menggunakan IIS Express sebagai web server default. Dan secara default juga, jika kita menjalankan (view in browser) halaman web yang tengah dibuat, maka IIS Express akan menggunakan jalur HTTP sebagai aksesnya.  Hal itu dapat dilihat window IIS Express seperti yang terlihat pada gambar di bawah ini.

Terkadang kita ingin melakukan uji coba aplikasi web pada jaluar HTTPS untuk suatu tujuan, maka kita terlebih dahulu harus mengaktifkannya.  Cara untuk mengaktifkan hal ini adalah dengan cara memilih project web pada area Solution Explorer, kemudian pada area Properties berikan nilai True pada atribut SSL Enabled.

Sekarang pada window IIS Express dapat dilihat terdapat dua jalur yang bisa digunakan untuk mengakses aplikasi web yang terdapat pada project.

Pada daftar tersebut selain berbedaan jalur antara HTTP dan HTTPS, juga terdapat berbedaan port yang digunakan untuk akses.

Dengan mengakses url https://localhost:44300 pada web browser maka kita akan melihat terlebih dahulu tampilan seperti berikut ini.

Hal ini biasa terjadi, karena jalur HTTPS yang sedang diakses dianggap “berbahaya” karena tidak memiliki security certificate yang “benar” :)

Karena kita yakin akan keamanan web tersebut (ya iya lah, kan kita sendiri yang membuatnya), maka kita tinggal klik link “Continue to this website (not recommended).”. Dan dapat dilihat halaman web yang dibuat pada jaluar HTTPS seperti gambar berikut ini.

Tentu saja dapat terlihat “tanda merah” pada input url sebagai tanda peringatan “bahaya yang mungkin mengancam” Smile

Sumber : http://www.rezafaisal.net/?p=1064

Share this post: | | | |
Posted: Mar 18 2014, 10:47 PM by reyza | with no comments
Filed under: ,
Formating ASP.NET Web API Output

Pada posting sebelumnya di http://www.rezafaisal.net/?p=1049, telah dijelaskan bagaimana menambahkan Web API Controller pada project ASP.NET Web Form.  Kemudian bagaimana cara untuk mengatur format output pada ASP.NET Web API? 

Sebenarnya format output ini tergantung dengan tipe data yang menjadi keluaran dari “method” yang dipanggil.  Pada posting sebelumnya, kita hanya menggunakan tipe data primitif string dan array of string. Nah bagaimana kalau misalnya outputnya berupa objek dari suatu class atau suatu collection yang berisi objek-objek dari class tertentu? Bagaimana kira-kira format output yang akan kita lihat? Untuk mengetahui hal itu maka kita akan coba melakukan beberapa pengujian.  Berikut adalah hal-hal yang akan kita lakukan.

Pertama akan dibuat class Mahasiswa dengan kode seperti berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
/// <summary>
/// Summary description for Mahasiswa
/// </summary>
public class Mahasiswa
{
    public string NIM;
    public string Nama;
    public string Jurusan;
}

Nah sekarang kita akan memodifikasi GeekController.cs yang telah kita buat menjadi seperti berikut ini :

public IEnumerable<Mahasiswa> Get()
{
    List<Mahasiswa> data = new List<Mahasiswa>();
 
    Mahasiswa mhs1 = new Mahasiswa();
    mhs1.NIM = "1";
    mhs1.Nama = "Adi";
    mhs1.Jurusan = "Ilkom";
    data.Add(mhs1);
 
    Mahasiswa mhs2 = new Mahasiswa();
    mhs2.NIM = "2";
    mhs2.Nama = "Ida";
    mhs2.Jurusan = "Ilkom";
    data.Add(mhs2);
 
    Mahasiswa mhs3 = new Mahasiswa();
    mhs3.NIM = "3";
    mhs3.Nama = "Dia";
    mhs3.Jurusan = "Ilkom";
    data.Add(mhs3);
 
    return data;
}

Dan berikut ini adalah output ketika GeekController.cs diakses via web :

[
{"NIM":"1","Nama":"Adi","Jurusan":"Ilkom"},
{"NIM":"2","Nama":"Ida","Jurusan":"Ilkom"},
{"NIM":"3","Nama":"Dia","Jurusan":"Ilkom"}
]

Dan berikut adalah output dengan format xml :

<ArrayOfMahasiswa>
    <Mahasiswa>
        <Jurusan>Ilkom</Jurusan>
        <NIM>1</NIM>
        <Nama>Adi</Nama>
    </Mahasiswa>
    <Mahasiswa>
        <Jurusan>Ilkom</Jurusan>
        <NIM>2</NIM>
        <Nama>Ida</Nama>
    </Mahasiswa>
    <Mahasiswa>
        <Jurusan>Ilkom</Jurusan>
        <NIM>3</NIM>
        <Nama>Dia</Nama>
    </Mahasiswa>
</ArrayOfMahasiswa>

Contoh selanjutnya adalah jika keluarannya hanya mengembalikan objek Mahasiswa saja, maka kita perlu ubah salah satu method pada GeekController.cs seperti berikut ini :

public Mahasiswa Get(string id)
{
    Mahasiswa mhs1 = new Mahasiswa();
    mhs1.NIM = "1";
    mhs1.Nama = "Adi";
    mhs1.Jurusan = "Ilkom";
 
    return mhs1;
}

Maka dapat kita lihat outputnya seperti berikut ini :

{
    "NIM":"1",
    "Nama":"Adi",
    "Jurusan":"Ilkom"
}

atau dengan format XML :

<Mahasiswa>
    <Jurusan>Ilkom</Jurusan>
    <NIM>1</NIM>
    <Nama>Adi</Nama>
</Mahasiswa>

Nah dengan format seperti ini developer akan dengan mudah “mengekstrak” data dengan JSON Parser atau XML Parser yang telah tersedia saat ini. #DeveloperFriendly

Selamat mencoba.

Sumber : http://www.rezafaisal.net/?p=1052

Share this post: | | | |
Posted: Mar 14 2014, 07:02 AM by reyza | with no comments
Filed under: , , ,
Adding Web API in ASP.NET Web Form Website

Misal saja sudah dibuat aplikasi web dengan ASP.NET Web Form dengan menggunakan template project Website. Dan tiba-tiba terdapat kebutuhan untuk membuat untuk menyediakan data yang akan dikonsumsi oleh aplikasi mobile. Maka perlu dibuat layanan berbasis http yang dapat diakses oleh aplikasi tersebut. Web Service adalah solusi yang paling gampang dan paling cepat dibuat untuk keperluan ini, tapiiiiiiiiiii …. karena yang akan mengaksesnya adalah platform Android maka hal itu tidak dilakukan. Hal ini dikarena pengalaman terdahulu dimana developer kesulitan untuk mengekstrak data dari output yang web service tersebut. Yang lain yang dapat digunakan adalah WCF Data Service, dengan ini output yang bisa didapat adalah dalam bentuk xml dengan format yang lebih baik daripada web service dan juga JSON.

Tapi karena keduanya sudah pernah dicoba, jadi dipilihlah teknologi yang lain yaitu ASP.NET Web API.  Pada posting ini bukan membuat project ASP.NET Web API dari awal tetapi akan dijelaskan bagaimana menambahkan “kemampuan” ASP.NET Web API pada suatu Website yang telah berisi ASP.NET Web Form.

{Creatint & Setting}

Langkah pertama yang dilakukan adalah klik kanan pada project Website yang telah ada, kemudian pilih Add > Add New Item.

Pada window Add New Item pilih Web API Controller Class (v1), disini saya memilih v1 karena untuk mengantisipasi deployment environment nanti. Kemudian berikan nama class yang diinginkan, di sini diberikan nama GeekController.cs. Nama Geek disini akan berpengaruh pada url yang akan digunakan untuk memanggil fungsi pada class ini. Selanjutkan klik tombol Add. Karena disini digunakan tipe project Website, maka class-class yang dibuat harus berada pada folder App_Code.

Klik tombol Yes tentunya Smile

Nah berikut ini adalah isi dari file GeekController.cs sesuai dengan template yang dipilih.

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Net;
   5: using System.Net.Http;
   6: using System.Web.Http;
   7:  
   8: public class GeekController : ApiController
   9: {
  10:     // GET api/<controller>
  11:     public IEnumerable<string> Get()
  12:     {
  13:         return new string[] { "value1", "value2" };
  14:     }
  15:  
  16:     // GET api/<controller>/5
  17:     public string Get(int id)
  18:     {
  19:         return "value";
  20:     }
  21:  
  22:     // POST api/<controller>
  23:     public void Post([FromBody]string value)
  24:     {
  25:     }
  26:  
  27:     // PUT api/<controller>/5
  28:     public void Put(int id, [FromBody]string value)
  29:     {
  30:     }
  31:  
  32:     // DELETE api/<controller>/5
  33:     public void Delete(int id)
  34:     {
  35:     }
  36: }

Kemudian perlu ditambahkan class WebApiConfig yang berfungsi untuk setting route Web API, dengan isi sebagai berikut :

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Net.Http.Headers;
   5: using System.Web;
   6: using System.Web.Http;
   7:  
   8: /// <summary>
   9: /// Summary description for WebApiConfig
  10: /// </summary>
  11: public static class WebApiConfig
  12: {
  13:     public static void Register(HttpConfiguration config)
  14:     {
  15:         config.Routes.MapHttpRoute(
  16:             name: "DefaultApi",
  17:             routeTemplate: "api/{controller}/{id}",
  18:             defaults: new { id = RouteParameter.Optional }
  19:         );
  20:  
  21:         config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
  22:     }
  23: }

Pada baris ke-17 dapat dilihat “pola” URL yang akan kita tuliskan untuk mengakses fungsi-fungsi pada class controller yang dibuat. Dengan “pola” tersebut maka untuk memanfaatkan class GeekController.cs, maka perlu ditulis URL sebagai berikut :


http://[nama_domain]/api/Geek

Jadi jika class controller yang dibuat adalah PemiluController.cs maka URL yang harus ditulis adalah :


http://[nama_domain]/api/Pemilu

Catatan :

Awalnya pernah dibuat class dengan nama tidak mengikuti aturan akhiran "Controller", misal GeekService.cs tetapi selalu error ketika memanggil layanan ini. Jadi “mungkin” memang harus mengikuti pola akhiran “Controller” pada nama class yang dibuat.

Kemudian pada baris ke-21, ditambahkan hal tersebut agar secara default output adalah JSON, agar developer tidak perlu repot lagi Smile #DeveloperFriendly

Langkah selanjutnya adalah menambahkan file Global.asax pada project Website ini, dengan cara menambahkan item baru seperti yang telah dilakukan sebelumnya, yaitu Add > Add New Item kemudian pilih Global Application Class.

   1: <%@ Application Language="C#" %>
   2:  
   3: <script runat="server">
   4:  
   5:     void Application_Start(object sender, EventArgs e) 
   6:     {
   7:         // Code that runs on application startup
   8:         WebApiConfig.Register(System.Web.Http.GlobalConfiguration.Configuration);
   9:     }
  10:     
  11:     void Application_End(object sender, EventArgs e) 
  12:     {
  13:         //  Code that runs on application shutdown
  14:  
  15:     }
  16:         
  17:     void Application_Error(object sender, EventArgs e) 
  18:     { 
  19:         // Code that runs when an unhandled error occurs
  20:  
  21:     }
  22:  
  23:     void Session_Start(object sender, EventArgs e) 
  24:     {
  25:         // Code that runs when a new session is started
  26:  
  27:     }
  28:  
  29:     void Session_End(object sender, EventArgs e) 
  30:     {
  31:         // Code that runs when a session ends. 
  32:         // Note: The Session_End event is raised only when the sessionstate mode
  33:         // is set to InProc in the Web.config file. If session mode is set to StateServer 
  34:         // or SQLServer, the event is not raised.
  35:  
  36:     }
  37:        
  38: </script>

Yang perlu diperhatikan pada kode di atas adalah pemanggilan class WebApiConfig yang telah dibuat sebelumnya pada baris ke-18, yaitu berada pada method Application_Start.

{Testing}

Untuk testing cukup dengan memanggil nama controller dengan pola seperti yang telah dibuat pada setting di atas. Sebagai contoh :


http://localhost/api/Geek

Maka akan didapat output seperti berikut :


["value1","value2"]

Contoh lain adalah :

Maka akan didapat output seperti berikut :


"value"

Hasil yang kita lihat di atas sesuai dengan isi kedua method berikut ini :

public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}

// GET api/<controller>/5
public string Get(int id)
{
return "value";
}

Nah jika kedua method tersebut diubah seperti ini :

public IEnumerable<string> Get()
{
return new string[] { "Hallo", "ASP.NET Web API" };
}

// GET api/<controller>/5
public string Get(string id)
{
return "Hello "+ id;
}

Maka akan didapat output seperti berikut :

 
["Hallo","ASP.NET Web API"]
 
"Hello reza"

Selanjutnya silakan berkarya dengan format output sesuai keinginan (yang nanti akan diterangkan pada posting selanjutnya).

Sumber : http://www.rezafaisal.net/?p=1049

Share this post: | | | |
XAML Invalid Markup in Visual Studio 2013

Saat menulis kode sederhana untuk aplikasi Windows Phone pada Visual Studio 2013 pertama kali di tahun ini terlihat baik-baik saja seperti biasanya menggunakan Visual Studio versi sebelumnya. Tetapi entah kenapa setelah project kode sederhana tersebut dibuka kembali terlihat pesan Invalid Markup seperti pada gambar di bawah ini.

Padahal tidak ada perubahan kode yang dilakukan, dan project tersebut tidak ada masalah saat pertama kali ditulis … save and sound Smile

Jika hal ini terjadi maka hal yang dapat dilakukan adalah dengan cara melakukan cara berikut ini

Klik kanan pada solution kemudian pilih Configuration Manager.

Kemudian pada window Configuration Manager ubah nilai Platform yang awalnya Any CPU menjadi x86.

Kemudian Build dan Visual Studio 2013 kembali mengenali kode-kode yang telah ditulis. Setelah itu dapat kembali ke Configuration Manager dan mengembalikan nilai Platform ke Any CPU dan lakukan Build ulang, maka dipastikan Visual Studio 2013 kembali mengenali kode-kode yang telah ditulis.

Tetapi sayangnya hal ini tidak bersifat permanen, karena ketika project yang sama ketika dibuka kembali akan menampilkan pesan “Invalid Markup” kembali dan harus dilakukan langkah-langkah di atas lagi.

Hal ini masih misteri (hehehe) apa penyebabnya, sebagai informasi saat ini pada Visual Studio 2013 saya terinstall beberapa tambahan seperti Telerik dan Xamarin yang mungkin saja bisa mempengaruhi kerja Visual Studio 2013 (mungkin).

 

Semoga informasi ini bermanfaat.

Share this post: | | | |
Posted: Feb 24 2014, 08:45 AM by reyza | with no comments
Filed under: , ,
[ASP.NET] JuiceUI Web Control & UpdatePanel

Pada tulisan sebelumnya ditulis pengenalan tentang JUICE UI di sini : http://www.rezafaisal.net/?p=1001JUICE UI adalah web control untuk mempermudah penggunaan jQuery UI pada halaman web from pada ASP.NET.  Pada posting tersebut diperlihatkan  antarmuka salah satu control JUICE UI secara default lebih bagus jika dibandingkan antarmuka salah control Ajax Control Toolkit.

Tetapi ….

Tetapi ….

Tetapi memang yang lebih tua (baca : Ajax Control Toolkit) lebih matang dalam penggunaannya dan dalam hal integrasi dengan teknologi-teknologi yang sudah ada. Sebagai contoh integrasi dan kerjasama JUICE UI web control dengan control dari AJAX Extension seperti control UpdatePanel.

Berikut ini adalah contoh kode penggunaan salah satu control Tab pada Ajax Control Toolkit dengan control UpdatePanel pada AJAX Extension.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer runat="server">
<ajaxToolkit:TabPanel runat="server">
<HeaderTemplate>Header</HeaderTemplate>
<ContentTemplate>
Content
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>

Kode di atas dapat dimuat tanpa error dan saat tombol diklik juga tidak terjadi masalah.

Bagaimana dengan JUICE UI dan UpdatePanel?

Dibuat kode yang mirip dengan kode sebelumnya, yaitu sepeti contoh di bawah ini :

<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<juice:Tabs ID="juiceTab1" runat="server">
<juice:TabPage Title="Tab 1" runat="server" ID="_Tab1">
<TabContent>
Tab 1
<asp:Button ID="Button1" runat="server" Text="Button" />
</TabContent>
</juice:TabPage>
</juice:Tabs>
</ContentTemplate>
</asp:UpdatePanel>

Kode di atas dimuat tanpa error, tetapi saat tombol diklik maka akan terjadi masalah dan error yang menampilkan pesan berikut ini :

Line: 940
Error: Sys.WebForms.PageRequestManagerServerErrorException: A potentially dangerous Request.Form value was detected from the client (_juiceWidgetOptions="...spinner":"<em>Loading&#8230;</...").

Sudah dicoba beberapa skenario penggunaan control Tab pada JUICE UI dan UpdatePanel tetapi hasilnya selalu mengeluarkan pesan seperti d atas.  Selain itu juga dicoba penggunaan control-control JUICE yang lain bersama dengan control UpdatePanel, hasilnya ada beberapa yang memang tidak bisa bekerja sama.

Jadi untuk membuat aplikasi yang stabil dengan memanfaatkan control-control pembuatan antarmuka pada halaman Web Form, sepertinya Ajax Control Toolkit masih menjadi pilihan yang pertama.

Share this post: | | | |
Supercharge ASP.NET Web Form with JUICE – Introduction

Sudah pasti JUICE disini bukan jus yang ini Smile with tongue out

Sebelum membahas JUICE, terlebih dahulu harus mengenal jQuery UI.  Sebagai informasi jQuery UI adalah sekumpulan interaksi interface, efek, widget dan theme yang dibangun dengan library jQuery untuk keperluan mempercantik antarmuka (UI) dan memberikan experience kepada pengguna (UX)  aplikasi web.  Bicara soal jQuery tentu saja kita harus mengenal Javascript. Bagi web developer ASP.NET yang terbiasa dengan control-control pada ASP.NET dan kurang fasih menggunakan Javascript apalagi jQuery maka JUICE UI dapat digunakan untuk membantu keterbatasan ini.

JUICE UI, adalah sekumpulan komponen untuk ASP.NET web form yang dapat mempermudah membuat jQuery UI Widget. Control-control yang telah tersedia pada JUICE UI dapat dilihat pada gambar berikut ini :

{Installasi}

Sebelum menggunakan control-control tersebut terlebih dulu kita perlu lakukan installasi library JUICE UI.  Untuk installasi kita cukup gunakan cara installasi via NuGet.

Cukup pilih Tool > Library Package Manager > Manage NuGet Packages for Solution, seperit yang terlihat pada gambar di atas.  Kemudian pada window Manage NuGet Packages pilih Online dan search dengan kata kunci juice, maka akan dapat dilihat seperti pada gambar di bawah ini. 

Kemudian klik tombol Install yang ada pada baris Juice UI. Kemudian pilih project yang akan menggunakan library ini.

Dan selanjutnya ikuti langkah-langkah berikutnya. Jika berhasil maka dapat kita lihat tambahan JuiceUI pada References.

Selain itu juga terdapat tambahan baris berikut ini pada web.config.

   1: <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />

{Testing}

Selanjutnya kita akan lakukan pengujian apakah proses installasi dan konfigurasi yang telah dilakukan telah benar. Maka dapat diuji dengan cara menggunakan kode berikut ini.

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJuiceUI.aspx.cs" Inherits="WebApplication2.TestJuiceUI" %>
   2:  
   3: <!DOCTYPE html>
   4:  
   5: <html xmlns="http://www.w3.org/1999/xhtml">
   6: <head runat="server">
   7:     <title></title>
   8: </head>
   9: <body>
  10:     <form id="form1" runat="server">
  11:         <div>
  12:             <asp:ScriptManager ID="ScriptManager1" runat="server">
  13:                 <Scripts>
  14:                     <asp:ScriptReference Path="~/Scripts/jquery-1.8.3.js" />
  15:                     <asp:ScriptReference Path="~/Scripts/jquery-ui-1.9.2.js" />
  16:                 </Scripts>
  17:             </asp:ScriptManager>
  18:             <juice:Tabs ID="_Default" runat="server">
  19:                 <juice:TabPage Title="Tab 1" runat="server" ID="_Tab1">
  20:                     <TabContent>
  21:                         Test
  22:                     </TabContent>
  23:                 </juice:TabPage>
  24:             </juice:Tabs>
  25:  
  26:         </div>
  27:     </form>
  28: </body>
  29: </html>

Yang perlu diperhatikan adalah pada baris ke-14 dan ke-15, pada baris-baris ini ditentukan dimana lokasi penyimpanan file jquery-1.8.3.js dan jquery-ui-1.9.2.js yang bisa dilihat terletak pada folder Scripts pada project aplikasi web, seperti yang terlihat pada gambar di bawah ini.

Langkah selanjutnya adalah “View in browser” halaman tersebut di atas dan hasilnya dapat dilihat seperti berikut ini.

Secara default, antarmuka hasil JUICE UI terlihat “lebih baik” dibandingkan dengan dengan control Tab milik Ajax Control Toolkit di bawah ini.

Pada posting selanjutnya akan dibahas secara detail control-control yang terdapat pada Juice UI dan implementasinya pada aplikasi web.

Share this post: | | | |
ASP.NET : Using Multiple Sitemap Files in Navigation Controls

{Pendahuluan}

Dalam membangun aplikasi pada umumnya, dan aplikasi web secara khusus harus diperhatikan hal-hal terkait dengan pengelolaan navigasi untuk halaman-halaman yang telah dibuat.  Ada beberapa hal yang harus diperhatikan terkait dengan pengelolaan navigasi, yaitu :

  • harus dipastikan setiap halaman yang dibuat harus dapat diakses.
  • harus dipastikan jangan sampai ada halaman yang dikunjungi dari suatu link tetapi setelah berada di halaman tersebut tidak dapat kemana-mana.
  • harus dipastikan setiap halaman yang sedang diakses memberikan informasi posisi halaman tersebut pada struktur navigasi yang ada.

Jika aplikasi web yang sedang dibangun menggunakan ASP.NET Web hal-hal tersebut dengan memanfaatkan control-control Navigation yang terdapat pada Toolbox, seperti :

File *.sitemap, dapat dipergunakan sebagai data yang menyimpan daftar halaman-halaman web yang akan ditampilkan pada menu. File *.sitemap ini adalah file dengan format XML yang mempunyai struktur seperti contoh pada kode berikut ini.

   1: <?xml version="1.0" encoding="utf-8" ?>
   2: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
   3:   <siteMapNode url="" title="e-Disposisi"  description="e-Disposisi" roles="*">
   4:     <siteMapNode url="~/Member/Default.aspx" title="Home"  description="Home" roles="*" />
   5:     <siteMapNode url="~/Setup/Jabatan.aspx" title="Jabatan"  description="Jabatan" roles="owner" />
   6:     <siteMapNode url="~/Setup/Organisasi.aspx" title="Organisasi"  description="Organisasi" roles="owner" />
   7:     <siteMapNode url="~/Setup/User.aspx" title="Pengelolaan User"  description="Pengelolaan User" roles="admin" />
   8:     <siteMapNode url="~/Surat/SuratMasuk.aspx" title="Pengelolaan Surat"  description="Pengelolaan Surat" roles="reciever" />
   9:     <siteMapNode url="~/Disposisi/Disposisi.aspx" title="Pengelolaan Disposisi"  description="Pengelolaan Disposisi" roles="user" />
  10:   </siteMapNode>
  11: </siteMap>

kode 1. eDisposisi.sitemap

Control Menu atau TreeView, dapat dipergunakan untuk menampilkan menu berdasarkan data dari file *.sitemap. Kedua control ini dapat ditemu pada bagian Navigation yang terdapat pada Toolbox.

gambar 1. Sitemap Controls.

Control SiteMapPath, dapat dipergunakan untuk memberikan informasi posisi halaman yang diakses oleh user. Posisi dari halaman tersebut akan sesuai dengan struktur navigasi yang berada pada file *.sitemap.

MasterPage, agar menu dan informasi posisi halaman dapat ditampilkan pada seluruh halaman web yang dibuat, maka dapat dibuat sebuah halaman *.master sebagai master page yang akan digunakan oleh halaman web *.aspx.

Pada posting ini tidak akan dibahas tentang hal-hal tersebut di atas secara detail, tetapi bagi yang ingin penjelasan detail tentang control-control dan fitur tersebut di atas dapat membaca ebook yang tersedia di : http://www.rezafaisal.net/?p=902.

{Permasalahan}

Misal dimiliki halaman seperti gambar berikut ini :

gambar 2. Halaman Default.aspx.

gambar 3. Halaman Organisasi.aspx.

gambar 4. Halaman Profile.aspx.

Keterangan :

1 adalah control Menu yang digunakan sebagai menu utama.

2 adalah control SiteMapPath yang digunakan untuk memberikan informasi posisi.

3 adalah hyperlink untuk mengakses halaman Profile.

Dari gambar-gambar dan keterangan di atas maka dapat dilihat bahwa setiap memilih item menu yang terdapat pada control Menu pada bagian 1 maka dapat dilihat SiteMapPath pada bagian 2 akan memberikan informasi posisi. Tetapi ada hal yang berbeda ketika hyperlink pada bagian 3 diklik akan mengantarkan ke halaman Profile.aspx dan SiteMapPath tetap memberikan informasi posisi. 

Diketahui bawah file *.sitemap adalah sumber data untuk control-control Navigation (Menu, TreeView dan SiteMapPath), jika digunakan file sitemap seperti pada kode 1, jika hyperlink Account Setting diklik maka dapat dipastikan SiteMapPath pada bagian 2 tidak akan memberikan informasi apa-apa karena dapat dilihat pada data tidak ada item menu yang mengacu ke file Profile.aspx.  Sedangkan jika digunakan file sitemap dengan data seperti berikut di bawah ini jika hyperlink Account Setting diklik control SiteMapPath akan menampilkan informasi seperti pada gambar di atas. Tetapi otomatis pada menu bagian 1 akan terlihat juga tambahan item menu Account Setting.

   1: <?xml version="1.0" encoding="utf-8" ?>
   2: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
   3:   <siteMapNode url="" title="e-Disposisi"  description="e-Disposisi" roles="*">
   4:     <siteMapNode url="~/Member/Default.aspx" title="Home"  description="Home" roles="*" />
   5:     <siteMapNode url="~/Member/Profile.aspx" title="Account Settings"  description="Account Settings" roles="*" />
   6:     <siteMapNode url="~/Setup/Jabatan.aspx" title="Jabatan"  description="Jabatan" roles="owner" />
   7:     <siteMapNode url="~/Setup/Organisasi.aspx" title="Organisasi"  description="Organisasi" roles="owner" />
   8:     <siteMapNode url="~/Setup/User.aspx" title="Pengelolaan User"  description="Pengelolaan User" roles="admin" />
   9:     <siteMapNode url="~/Surat/SuratMasuk.aspx" title="Pengelolaan Surat"  description="Pengelolaan Surat" roles="reciever" />
  10:     <siteMapNode url="~/Disposisi/Disposisi.aspx" title="Pengelolaan Disposisi"  description="Pengelolaan Disposisi" roles="user" />
  11:   </siteMapNode>
  12: </siteMap>

kode 2. eDisposisiNav.sitemap.

{Solusi}

Jika kita ingin membuat skenario seperti di atas dimana pada control Menu menggunakan data dari sitemap pada kode 1 dan control SiteMapPath menggunakan data dari file sitemap pada kode 1.  Untuk membuat skenario seperti itu dapat diikuti langkah-langkah berikut ini :

Menulis dua file sitemap, tulis dua file sitemap dengan nama (misalkan) eDisposisi.sitemap dengan isi seperti pada contoh kode 1 dan file eDisposisiNav.sitemap dengan isi seperti pada kode 2, dan simpan kedua file tersebut pada folder App_Data.

Mendaftarkan file sitemap pada file web.config, langkah selanjutnya adalah mendaftarkan kedua file tersebut pada file web.config seperti berikut ini, seperti pada baris ke-3 sampai baris ke-8. Dapat dilihat pada baris ke-5, bahwa untuk file eDisposisi.sitemap diberikan nilai name=eDisposisi_Sitemap, nama ini nanti akan dipanggil oleh control yang memerlukan data dari file ini. Begitu juga pada baris ke-6 dapat dilihat nilai name=eDisposisi_Nav untuk file eDisposisiNave.sitemap.

   1: <system.web>
   2:    ...
   3:     <siteMap enabled="true">
   4:       <providers>
   5:         <add name="eDisposisi_Sitemap" siteMapFile="~/App_Data/eDisposisi.sitemap" type="System.Web.XmlSiteMapProvider" securityTrimmingEnabled="true"/>
   6:         <add name="eDisposisi_Nav" siteMapFile="~/App_Data/eDisposisiNav.sitemap" type="System.Web.XmlSiteMapProvider" securityTrimmingEnabled="true"/>
   7:       </providers>
   8:     </siteMap>
   9:     ...
  10: </system.web>

Memuat data sitemap pada control Navigation, selanjutnya adalah memuat data pada control cukup dengan memanggil nilai name yang telah didefinisikan pada file web.config. Untuk memuat data pada control Menu pada bagian 1 dapat ditulis kode seperti berikut ini :

   1:  
   2: <asp:SiteMapDataSource ID="SiteMapDataSource_MainMenu" ShowStartingNode="false" SiteMapProvider="eDisposisi_Sitemap" runat="server" />
   3: <asp:Menu ID="Menu_Main" DataSourceID="SiteMapDataSource_MainMenu" runat="server" Orientation="Vertical" DynamicHorizontalOffset="1">
   4: </asp:Menu>

Pada baris ke-2 dapat dilihat sumber data yang digunakan adalah eDisposisi_Sitemap yang artinya datanya berasal dari file eDisposisi.sitemap.

Sedangkan untuk control SiteMapPath akan ditulis seperti berikut ini :

   1:  
   2: <asp:SiteMapPath ID="SiteMapPath_Main" SiteMapProvider="eDisposisi_Nav" runat="server">
   3: </asp:SiteMapPath>

Pada kode di atas dapat dilihat data yang digunakan adalah seperti terlihat pada nilai SiteMapProvider yaitu eDisposisi_Nav, yang artinya file sitemap yang digunakan adalah eDisposisiNav.sitemap.

Selamat mencoba.

Share this post: | | | |
More Posts Next page »