{"id":1049,"date":"2014-03-13T14:55:12","date_gmt":"2014-03-13T14:55:12","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1049"},"modified":"2014-03-13T15:03:45","modified_gmt":"2014-03-13T15:03:45","slug":"adding-web-api-in-asp-net-web-form-website","status":"publish","type":"post","link":"http:\/\/www.rezafaisal.net\/?p=1049","title":{"rendered":"Adding Web API in ASP.NET Web Form Website"},"content":{"rendered":"

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 \u2026. 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.<\/p>\n

Tapi karena keduanya sudah pernah dicoba, jadi dipilihlah teknologi yang lain yaitu ASP.NET Web API.\u00a0 Pada posting ini bukan membuat project ASP.NET Web API dari awal tetapi akan dijelaskan bagaimana menambahkan \u201ckemampuan\u201d ASP.NET Web API pada suatu Website yang telah berisi ASP.NET Web Form.<\/p>\n

{Creating & Setting<\/em><\/strong>}<\/p>\n

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

\"blog1\"<\/a><\/p>\n

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 Geek<\/em><\/strong>Controller.cs. Nama Geek <\/span><\/em><\/strong>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.<\/p>\n

\"blog2\"<\/a><\/p>\n

Klik tombol Yes tentunya \"Smile\"<\/p>\n

Nah berikut ini adalah isi dari file GeekController.cs sesuai dengan template yang dipilih.<\/p>\n

\n
\n
   1:<\/span> using<\/span> System;<\/pre>\n
<\/p>\n
   2:<\/span> using<\/span> System.Collections.Generic;<\/pre>\n
<\/p>\n
   3:<\/span> using<\/span> System.Linq;<\/pre>\n
<\/p>\n
   4:<\/span> using<\/span> System.Net;<\/pre>\n
<\/p>\n
   5:<\/span> using<\/span> System.Net.Http;<\/pre>\n
<\/p>\n
   6:<\/span> using<\/span> System.Web.Http;<\/pre>\n
<\/p>\n
   7:<\/span><\/pre>\n
<\/p>\n
   8:<\/span> public<\/span> class<\/span> GeekController : ApiController<\/pre>\n
<\/p>\n
   9:<\/span> {<\/pre>\n
<\/p>\n
  10:<\/span>     \/\/ GET api\/<controller><\/span><\/pre>\n
<\/p>\n
  11:<\/span>     public<\/span> IEnumerable<string<\/span>> Get()<\/pre>\n
<\/p>\n
  12:<\/span>     {<\/pre>\n
<\/p>\n
  13:<\/span>         return<\/span> new<\/span> string<\/span>[] { \"value1\"<\/span>, \"value2\"<\/span> };<\/pre>\n
<\/p>\n
  14:<\/span>     }<\/pre>\n
<\/p>\n
  15:<\/span><\/pre>\n
<\/p>\n
  16:<\/span>     \/\/ GET api\/<controller>\/5<\/span><\/pre>\n
<\/p>\n
  17:<\/span>     public<\/span> string<\/span> Get(int<\/span> id)<\/pre>\n
<\/p>\n
  18:<\/span>     {<\/pre>\n
<\/p>\n
  19:<\/span>         return<\/span> \"value\"<\/span>;<\/pre>\n
<\/p>\n
  20:<\/span>     }<\/pre>\n
<\/p>\n
  21:<\/span><\/pre>\n
<\/p>\n
  22:<\/span>     \/\/ POST api\/<controller><\/span><\/pre>\n
<\/p>\n
  23:<\/span>     public<\/span> void<\/span> Post([FromBody]string<\/span> value<\/span>)<\/pre>\n
<\/p>\n
  24:<\/span>     {<\/pre>\n
<\/p>\n
  25:<\/span>     }<\/pre>\n
<\/p>\n
  26:<\/span><\/pre>\n
<\/p>\n
  27:<\/span>     \/\/ PUT api\/<controller>\/5<\/span><\/pre>\n
<\/p>\n
  28:<\/span>     public<\/span> void<\/span> Put(int<\/span> id, [FromBody]string<\/span> value<\/span>)<\/pre>\n
<\/p>\n
  29:<\/span>     {<\/pre>\n
<\/p>\n
  30:<\/span>     }<\/pre>\n
<\/p>\n
  31:<\/span><\/pre>\n
<\/p>\n
  32:<\/span>     \/\/ DELETE api\/<controller>\/5<\/span><\/pre>\n
<\/p>\n
  33:<\/span>     public<\/span> void<\/span> Delete(int<\/span> id)<\/pre>\n
<\/p>\n
  34:<\/span>     {<\/pre>\n
<\/p>\n
  35:<\/span>     }<\/pre>\n
<\/p>\n
  36:<\/span> }<\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Kemudian perlu ditambahkan class WebApiConfig yang berfungsi untuk setting route Web API, dengan isi sebagai berikut :<\/p>\n
\n
\n
   1:<\/span> using<\/span> System;<\/pre>\n
<\/p>\n
   2:<\/span> using<\/span> System.Collections.Generic;<\/pre>\n
<\/p>\n
   3:<\/span> using<\/span> System.Linq;<\/pre>\n
<\/p>\n
   4:<\/span> using<\/span> System.Net.Http.Headers;<\/pre>\n
<\/p>\n
   5:<\/span> using<\/span> System.Web;<\/pre>\n
<\/p>\n
   6:<\/span> using<\/span> System.Web.Http;<\/pre>\n
<\/p>\n
   7:<\/span><\/pre>\n
<\/p>\n
   8:<\/span> \/\/\/ <summary><\/span><\/pre>\n
<\/p>\n
   9:<\/span> \/\/\/ Summary description for WebApiConfig<\/span><\/pre>\n
<\/p>\n
  10:<\/span> \/\/\/ <\/summary><\/span><\/pre>\n
<\/p>\n
  11:<\/span> public<\/span> static<\/span> class<\/span> WebApiConfig<\/pre>\n
<\/p>\n
  12:<\/span> {<\/pre>\n
<\/p>\n
  13:<\/span>     public<\/span> static<\/span> void<\/span> Register(HttpConfiguration config)<\/pre>\n
<\/p>\n
  14:<\/span>     {<\/pre>\n
<\/p>\n
  15:<\/span>         config.Routes.MapHttpRoute(<\/pre>\n
<\/p>\n
  16:<\/span>             name: \"DefaultApi\"<\/span>,<\/pre>\n
<\/p>\n
  17:<\/span>             routeTemplate: \"api\/{controller}\/{id}\"<\/span>,<\/pre>\n
<\/p>\n
  18:<\/span>             defaults: new<\/span> { id = RouteParameter.Optional }<\/pre>\n
<\/p>\n
  19:<\/span>         );<\/pre>\n
<\/p>\n
  20:<\/span><\/pre>\n
<\/p>\n
  21:<\/span>         config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new<\/span> MediaTypeHeaderValue(\"text\/html\"<\/span>));<\/pre>\n
<\/p>\n
  22:<\/span>     }<\/pre>\n
<\/p>\n
  23:<\/span> }<\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Pada baris ke-17 dapat dilihat \u201cpola\u201d URL yang akan kita tuliskan untuk mengakses fungsi-fungsi pada class controller yang dibuat. Dengan \u201cpola\u201d tersebut maka untuk memanfaatkan class GeekController.cs, maka perlu ditulis URL sebagai berikut :<\/p>\n
\n
http:\/\/[nama_domain]\/api\/Geek<\/span><\/pre>\n
 <\/p>\n<\/div>\n
Jadi jika class controller yang dibuat adalah PemiluController.cs maka URL yang harus ditulis adalah :<\/p>\n
\n
http:\/\/[nama_domain]\/api\/Pemilu<\/span><\/pre>\n
 <\/p>\n<\/div>\n
Catatan :<\/em><\/span><\/strong><\/p>\n
Awalnya pernah dibuat class dengan nama tidak mengikuti aturan akhiran “Controller”, misal GeekService.cs tetapi selalu error ketika memanggil layanan ini. Jadi \u201cmungkin\u201d memang harus mengikuti pola akhiran \u201cController\u201d pada nama class yang dibuat.<\/p>\n
Kemudian pada baris ke-21, ditambahkan hal tersebut agar secara default output adalah JSON, agar developer tidak perlu repot lagi \"Smile\" #DeveloperFriendly<\/p>\n
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.<\/p>\n
\n
\n
   1:<\/span> <%@ Application Language=\"C#\"<\/span> %><\/pre>\n
<\/p>\n
   2:<\/span><\/pre>\n
<\/p>\n
   3:<\/span> <script runat=\"server\"<\/span>><\/pre>\n
<\/p>\n
   4:<\/span><\/pre>\n
<\/p>\n
   5:<\/span>     void<\/span> Application_Start(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
   6:<\/span>     {<\/pre>\n
<\/p>\n
   7:<\/span>         \/\/ Code that runs on application startup<\/span><\/pre>\n
<\/p>\n
   8:<\/span>         WebApiConfig.Register(System.Web.Http.GlobalConfiguration.Configuration);<\/pre>\n
<\/p>\n
   9:<\/span>     }<\/pre>\n
<\/p>\n
  10:<\/span><\/pre>\n
<\/p>\n
  11:<\/span>     void<\/span> Application_End(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
  12:<\/span>     {<\/pre>\n
<\/p>\n
  13:<\/span>         \/\/  Code that runs on application shutdown<\/span><\/pre>\n
<\/p>\n
  14:<\/span><\/pre>\n
<\/p>\n
  15:<\/span>     }<\/pre>\n
<\/p>\n
  16:<\/span><\/pre>\n
<\/p>\n
  17:<\/span>     void<\/span> Application_Error(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
  18:<\/span>     {<\/pre>\n
<\/p>\n
  19:<\/span>         \/\/ Code that runs when an unhandled error occurs<\/span><\/pre>\n
<\/p>\n
  20:<\/span><\/pre>\n
<\/p>\n
  21:<\/span>     }<\/pre>\n
<\/p>\n
  22:<\/span><\/pre>\n
<\/p>\n
  23:<\/span>     void<\/span> Session_Start(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
  24:<\/span>     {<\/pre>\n
<\/p>\n
  25:<\/span>         \/\/ Code that runs when a new session is started<\/span><\/pre>\n
<\/p>\n
  26:<\/span><\/pre>\n
<\/p>\n
  27:<\/span>     }<\/pre>\n
<\/p>\n
  28:<\/span><\/pre>\n
<\/p>\n
  29:<\/span>     void<\/span> Session_End(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
  30:<\/span>     {<\/pre>\n
<\/p>\n
  31:<\/span>         \/\/ Code that runs when a session ends. <\/span><\/pre>\n
<\/p>\n
  32:<\/span>         \/\/ Note: The Session_End event is raised only when the sessionstate mode<\/span><\/pre>\n
<\/p>\n
  33:<\/span>         \/\/ is set to InProc in the Web.config file. If session mode is set to StateServer <\/span><\/pre>\n
<\/p>\n
  34:<\/span>         \/\/ or SQLServer, the event is not raised.<\/span><\/pre>\n
<\/p>\n
  35:<\/span><\/pre>\n
<\/p>\n
  36:<\/span>     }<\/pre>\n
<\/p>\n
  37:<\/span><\/pre>\n
<\/p>\n
  38:<\/span> <\/script><\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
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.<\/p>\n
{Testing<\/em><\/strong>}<\/p>\n
Untuk testing cukup dengan memanggil nama controller dengan pola seperti yang telah dibuat pada setting di atas. Sebagai contoh :<\/p>\n
\n
http:\/\/localhost\/api\/Geek<\/span><\/pre>\n
 <\/p>\n<\/div>\n
Maka akan didapat output seperti berikut :<\/p>\n
\n
[\"value1\"<\/span>,\"value2\"<\/span>]<\/pre>\n
 <\/p>\n<\/div>\n
Contoh lain adalah :<\/p>\n
\n
http:\/\/localhost\/api\/Geek\/reza<\/span><\/a>\r\n\r\natau \r\n\r\nhttp:\/\/localhost\/api\/Geek?id=reza<\/span><\/a><\/pre>\n
 <\/p>\n<\/div>\n
Maka akan didapat output seperti berikut :<\/p>\n
\n
\"value\"<\/span><\/pre>\n
 <\/p>\n<\/div>\n
Hasil yang kita lihat di atas sesuai dengan isi kedua method berikut ini :<\/p>\n
\n
public<\/span> IEnumerable<string<\/span>> Get(){    return<\/span> new<\/span> string<\/span>[] { \"value1\"<\/span>, \"value2\"<\/span> };}\r\n\r\n\/\/ GET api\/<controller>\/5<\/span>public<\/span> string<\/span> Get(int<\/span> id){    return<\/span> \"value\"<\/span>;}<\/pre>\n
 <\/p>\n<\/div>\n
Nah jika kedua method tersebut diubah seperti ini :<\/p>\n
\n
public<\/span> IEnumerable<string<\/span>> Get(){    return<\/span> new<\/span> string<\/span>[] { \"Hallo\"<\/span>, \"ASP.NET Web API\"<\/span> };}\r\n\r\n\/\/ GET api\/<controller>\/5<\/span>public<\/span> string<\/span> Get(string<\/span> id){    return<\/span> \"Hello \"<\/span>+ id;}<\/pre>\n
 <\/p>\n<\/div>\n
Maka akan didapat output seperti berikut :<\/p>\n
\n
\n
<\/p>\n
[\"Hallo\"<\/span>,\"ASP.NET Web API\"<\/span>]<\/pre>\n
<\/p>\n
<\/p>\n
\"Hello reza\"<\/span><\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Selanjutnya silakan berkarya dengan format output sesuai keinginan (yang nanti akan diterangkan pada posting selanjutnya).<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":1,"featured_media":1045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[68,96,108],"class_list":["post-1049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-asp-net","tag-vs-2013","tag-web-api"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2014\/03\/blog1_thumb.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-gV","_links":{"self":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1049"}],"version-history":[{"count":2,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1049\/revisions"}],"predecessor-version":[{"id":1051,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1049\/revisions\/1051"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/1045"}],"wp:attachment":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1049"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}