Puji dan syukur diucapkan kepada Allah SWT atas selesainya ebook sederhana yang berjudul
Pengenalan ASP.NET Web API.
Pada ebook ini akan dikenalkan tentang ASP.NET Web API dengan bantuan tool Visual Studio
2013. Selain itu juga akan diberikan contoh-contoh penggunaannya serta pemanfaatannya
pada aplikasi web dan mobile.
Akhir kata, selamat membaca dan semoga ebook ini bermanfaat bagi para web developer
pemula untuk membuat aplikasi web. Kritik dan saran akan sangat berarti dan dapat ditujukan
via email.
M Reza Faisal
(reza.faisal [at] gmail [dot] com)
I
Daftar Isi
Kata Pengantar ............................................................................................... I
Daftar Isi ........................................................................................................ II
Daftar Gambar ............................................................................................. IV
1 Pendahuluan ............................................................................................. 1-1
Web Service ..................................................................................................... 1-1
ASP.NET & Visual Studio 2013 ................................................................... 1-3
Rangkuman ..................................................................................................... 1-4
2 Perkenalan ................................................................................................ 2-5
Project Web API.............................................................................................. 2-5
Web API pada Existing Project Web ........................................................ 2-11
ASP.NET Web Form Web Application ............................................................ 2-11
ASP.NET MVC Web Application ..................................................................... 2-13
ASP.NET Web Form Website ............................................................................ 2-14
II
Class OutputModel.cs ........................................................................................ 3-50
Class MahasiswaController.cs........................................................................... 3-51
Create .................................................................................................................... 3-54
Retrieve ................................................................................................................. 3-55
Update .................................................................................................................. 3-58
Delete .................................................................................................................... 3-59
5 Penutup.................................................................................................... 5-76
III
Daftar Gambar
Gambar 1-1. Aplikasi web. ................................................................................................................1-1
Gambar 1-2. Aplikasi mobile. ...........................................................................................................1-2
Gambar 1-3. HTTP Service ................................................................................................................1-3
Gambar 1-4. Ebook seri ASP.NET. ...................................................................................................1-3
Gambar 2-1. Window Add New Project..........................................................................................2-5
Gambar 2-2. Window New ASP.NET Project. ................................................................................2-6
Gambar 2-3. Solution Explorer. ........................................................................................................2-6
Gambar 2-4. Web API pada Empty template. ................................................................................2-7
Gambar 2-5. Project Web API dengan Empty template. ...............................................................2-8
Gambar 2-6. Menambah Web API Controller Class (v2). .............................................................2-9
Gambar 2-7. Halaman bantuan Web API. .....................................................................................2-17
Gambar 2-8. Window Manage NuGet Packages. .........................................................................2-18
Gambar 2-9. Folder Area. ................................................................................................................2-19
Gambar 2-10. Daftar API. ................................................................................................................2-21
Gambar 2-11. Manage NuGet Package Microsoft.AspNet.WebApi.Client. ..........................2-22
Gambar 2-12. Daftar API pada class controller Values. ..............................................................2-23
Gambar 2-13. Tombol Test API.......................................................................................................2-24
Gambar 2-14. Form Test Client Get api/Values. ........................................................................2-24
Gambar 2-15. Form Test Client response for Get api/Value. ...................................................2-25
Gambar 2-16. Form Test Client Post api/Values. .......................................................................2-25
Gambar 2-17. Form Test Client response for POST api/Values...............................................2-26
Gambar 2-18. Form Test Client PUT api/Values .......................................................................2-26
Gambar 2-19. Form Test Client response for PUT api/Values. ................................................2-27
Gambar 2-20. Form Test Client Delete api/Values. ...................................................................2-27
Gambar 2-21. Form Test Client Response for DELETE api/Values. .......................................2-28
Gambar 3-1. Form akses GET api/Matematika. ............................................................................3-31
Gambar 3-2. Output API GET api/Matematika. ...........................................................................3-31
Gambar 3-3. Form akses GET api/Matematika/{id} .....................................................................3-32
Gambar 3-4. Output API GET api/Matematika{id} ......................................................................3-32
Gambar 3-5. Form akses API GET api/Matematika?op={op}&bil1={bil1}&bil2={bil2} ............3-34
Gambar 3-6. Response dari API GET api/Matematika? ?op={op}&bil1={bil1}&bil2={bil2} ....3-35
Gambar 3-7. Menambahkan database pada project. ....................................................................3-35
IV
Gambar 3-8. LINQ to SQL Classes Akademik.dbml. ...............................................................3-36
Gambar 3-9. Data class Mahasiswa. ...............................................................................................3-37
Gambar 3-10. Form POST api/Mahasiswa. ...................................................................................3-39
Gambar 3-11. Response POST api/Mahasiswa. ............................................................................3-39
Gambar 3-12. Hasil proses create data. ..........................................................................................3-40
Gambar 3-13. Form GET api/Mahasiswa. .....................................................................................3-40
Gambar 3-14. Response GET api/Mahasiswa. ..............................................................................3-41
Gambar 3-15. Form GET api/Mahasiswa/nim. .............................................................................3-41
Gambar 3-16. Response api/Mahasiswa/nim. ...............................................................................3-42
Gambar 3-17. Form PUT api/Mahasiswa. .....................................................................................3-43
Gambar 3-18. Response PUT api/Mahasiswa. ..............................................................................3-43
Gambar 3-19. Data telah diupdate. ................................................................................................3-43
Gambar 3-20. Form DELETE api/Mahasiswa. ..............................................................................3-44
Gambar 3-21. Response DELETE api/Mahasiswa. .......................................................................3-44
Gambar 3-22. Form POST api/Mahasiswa. ...................................................................................3-46
Gambar 3-23. Form PUT api/Mahasiswa. .....................................................................................3-47
Gambar 3-24. Respose GET dan POST. .........................................................................................3-47
Gambar 3-25. Window Add New Item ADO.NET Entity Data Model - Akademik.edmx .3-48
Gambar 3-26. Entity Data Model Wizard Generate from Database. ......................................3-48
Gambar 3-27. Pembuatan connection string. ................................................................................3-49
Gambar 3-28. Pemilihan versi Entity Framework. .......................................................................3-49
Gambar 3-29. Pemilihan tabel. ........................................................................................................3-50
Gambar 3-30. Antarmuka designer Akademik.edmx. ................................................................3-50
Gambar 3-31. Form POST api/Mahasiswa ....................................................................................3-55
Gambar 3-32. Response POST api/Mahasiswa .............................................................................3-55
Gambar 3-33. Form API GET api/Mahasiswa...............................................................................3-56
Gambar 3-34. Response API GET api/Mahasiswa. ......................................................................3-57
Gambar 3-35. Form API GET api/Mahasiswa?nim={nilai} .........................................................3-57
Gambar 3-36. Response api/Mahasiswa?nim={nilai} ...................................................................3-57
Gambar 3-37. Form PUT api/Mahasiswa ......................................................................................3-58
Gambar 3-38. Response PUT api/Mahasiswa. ..............................................................................3-59
Gambar 3-39. Form DELETE api/Mahasiswa. ..............................................................................3-60
Gambar 3-40. Response DELETE api/Mahasiswa. .......................................................................3-60
Gambar 3-41. Response DELETE api/Mahasiswa yang menampilkan kesalahan. .................3-60
Gambar 4-1. Manage NuGet Packages Microsoft ASP.NET Web API 2.1 Client Library. ..4-61
V
Gambar 4-2. Installasi Microsoft ASP.NET Web API 2.1 Client Library. .................................4-62
Gambar 4-3. Folder Reference System.Net.Http dan System.Net.Http.Formating. .............4-62
Gambar 4-4. Hasil akses Web API dari aplikasi console. ............................................................4-64
Gambar 4-5. Output Web API dalam formal XML. .....................................................................4-65
Gambar 4-6. Gridview Data Mahasiswa. ......................................................................................4-71
Gambar 4-7. Form input data mahasiswa. ....................................................................................4-72
Gambar 4-8. GridView dengan link untuk memilih record. ......................................................4-73
Gambar 4-9. Menghapus record mahasiswa. ...............................................................................4-74
VI
1
Pendahuluan
Web Service
Aplikasi web yang mempunyai sifat untuk dapat diakses di mana saja dan kapan saja,
membuat banyak aplikasi-aplikasi banyakk bermunculan dan dimanfaatkan oleh orang
banyak. Baik itu aplikasi yang berfungsi membantu untuk pekerjaan perkantoran atau
aplikasi yang bersifat hiburan, jejaring sosial dan lain-lain.
Mungkin kita lebih mengenal aplikasi web yang bersifat hiburan seperti youtube
(www.youtube.com) atau aplikasi web jejaring sosial seperti facebook (www.facebook.com)
atau twitter (www.twitter.com). Tetapi dalam perkembangannya, sekarang ini sudah sangat
umum perangkat smartphone, pad atau tab sehingga tidak heran jika aplikasi web
mempunyai pendamping dalam kehidupannya. Pendamping ini sering disebut dengan
aplikasi mobile. Kenapa disebut pendamping alih-alih sebagai pesaing? Hal ini karena
memang antara aplikasi web dan aplikasi mobile tidak saling bersaing, tetapi malah saling
mendukung satu sama lain-lain.
Untuk mengetahui bagaimana antara aplikasi web dan aplikasi web dapat saling mendukung
satu sama lain, maka akan dipaparkan pada bagian dibawah ini.
Pertama akan dijelaskan bagaimana aplikasi web secara umum bekerja. Aplikasi web yang
berada pada web server akan dapat diakses oleh komputer yang digunakan oleh pengguna
dengan web browser seperti Internet Explorer. Komunikasi yang terjadi antara web browser
pada komputer dengan web server adalah dengan dua proses, yaitu request dan response.
Aplikasi
Web
Request adalah proses yang dilakukan oleh web browser pada komputer ke web server,
kemudian permintaan tersebut akan diolah oleh web server dan hasilnya akan dikirimkan ke
web browser yang merupakan proses response dari web server. Hasil proses response ini lah
yang akan kita lihat dalam bentuk halaman web pada web browser. Misal user ingin melihat
data mahasiswa pada web browser, maka yang akan dilakukan adalah akan ada proses request
ke web server. Permintaan tersebut akan diproses pada web server, karena ada kebutuhan
akan data mahasiswa maka aplikasi web pada sisi server akan mengambil data mahasiswa
1-1
tersebut pada database kemudian hasilkannya akan dikirimkan ke web browser sebagai
proses response.
Dari paparan tersebut maka didapat gambaran jika aplikasi web itu adalah aplikasi yang
disimpan di server, bagi pengguna yang ingin menggunakannya tidak perlu menginstall
apapun di komputer miliknya. Pengguna cukup menginstall web browser, kemudian
pengguna cukup mengetikkan alamat dari web server pada web browser tersebut, dan
selanjutnya proses yang terjadi seperti yang telah dipaparkan di atas.
Bagaimana kira-kira cara kerja aplikasi mobile (bukan : web browser pada perangkat mobile)
jika ingin melakukan hal di atas? Aplikasi mobile memang sangat beragam, ada game, ada
aplikasi tanpa perlu koneksi internet atau aplikasi yang terhubung jaringan internet untuk
bisa digunakan, seperti aplikasi mobile twitter atau facebook.
Gambar di bawah ini akan memberikan ilustrasi cara kerja aplikasi mobile yang
membutuhkan koneksi internet.
Web Aplikasi
Service Mobile
Internet
Dari gambar di atas dapat dilihat letak dari aplikasi mobile yang berada pada perangkat
mobile itu sendiri, ini artinya aplikasi mobile harus diinstall pada perangkat mobile tersebut.
Misalnya aplikasi mobile yang diinstall adalah aplikasi mobile Facebook, maka dipastikan
akan ada halaman yang berfungsi untuk login atau halaman untuk menampilkan status-
status yang ditulis. Pada proses login akan dilakukan pengecekan username dan password
yang dimasukkan untuk dicocokkan dengan data yang ada di database. Begitu juga jika pada
halaman ingin ditampilkan daftar status yang telah di tulis pada wall, maka perlu ada proses
untuk mengambil data tersebut pada database. Tetapi jika dilihat pada gambar di atas, proses
pengambilan data tersebut tentunya tidak bisa dilakukan langsung dari aplikasi mobile ke
database server. Pada gambar terdapat layanan berbasis web (web service) yang berada pada
web server, pada layanan tersebut terdapat fungsi-fungsi yang bertugas untuk melakukan
hal-hal penting termasuk fungsi untuk mengakses data pada database server atau fungsi
untuk otentikasi user untuk proses login. Maka aplikasi mobile cukup mengakses fungsi-
fungsi pada layanan tersebut untuk melakukan proses-proses tersebut.
Keberadaan web service sebagai perantara seperti gambar di atas mempunyai beberapa
manfaat, diantaranya adalah :
1. Layanan ini dapat lebih mengamankan data pada database server, hal ini dikarena
database tidak langsung diakses oleh aplikasi.
2. Layanan ini bukan hanya dapat diakses oleh aplikasi mobile, tapi juga dapat diakses
oleh aplikasi jenis lain seperti aplikasi web atau aplikasi desktop. Selain itu layanan
berbasis web ini akan dapat diakses dan dimanfaatkan pada berbagai platform atau
1-2
teknologi, artinya layanan ini bisa diakses oleh aplikasi yang dibangun dengan .NET,
Java, PHP, Python, Ruby, Javascript dan lain-lain.
Dari paparan di atas maka dapat digambarkan peran dari web service seperti gambar berikut
ini.
Internet
Dari paparan di atas maka diharapkan pembaca sudah mempunyai gambaran tentang apa itu
web service dan manfaatnya. Selanjutnya pada ebook ini akan dibahas mengenai ASP.NET
Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web
service.
1-3
Rangkuman
Pada bab ini telah dijelaskan beberapa hal sebagai berikut :
1. Pengantar web service.
2. Pengantar ASP.NET.
3. Pengantar Visual Studio.
1-4
2
Perkenalan
Pada bagian ini akan dilakukan perkenalan dengan ASP.NET Web API dengan cara membuat
kode program secara langsung. Kode program yang akan dibuat terdiri atas 2 cara yaitu :
1. Project Web API, yaitu membuat kode program Web API secara khusus dari awal
dengan template project yang telah disediakan.
2. Penambahkan Web API pada existing project web, yaitu menambahkan class Web
API controller pada project web application atau website ASP.NET Web Form atau
ASP.NET MVC.
Tuliskan nama project pada kolom Name, kemudian klik tombol OK. Kemudian pada
window New ASP.NET Project pilih Web API dan klik tombol OK.
1-5
Gambar 2-2. Window New ASP.NET Project.
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. Untuk mengaktifkan web
1-6
server dari project ini dan melihat pada web browser dengan cara klik kanan pada project
WebAPI yang ada pada Solution Explorer kemudian pilih Debug > Start new instance.
Dengan cara di atas dapat dilihat pada project sudah terdapat banyak file-file yang mungkin
belum atau tidak diperlukan. Jika ingin membuat project kosong untuk implementasi Web
API maka dapat dilakukan langkah-langkah berikut ini.
Pilih File > New Project kemudian pada window Add New Project pilih Visual C# > Web >
ASP.NET Web Application. Kemudian pada window New ASP.NET Project pilih Empty
pada area Select a template dan centang Web API pada area Add folder and core reference
for. Selanjutnya klik tombol OK.
Hasilnya dapat dilihat file-file yang terdapat pada project yang telah dibuat.
1-7
Gambar 2-5. Project Web API dengan Empty template.
Langkah selanjutnya adalah menambahkan class Web API controller pada project tersebut
dengan cara klik kanan pada folder Controllers kemudian pilih Add > Web API Controller
Class (v2) seperti yang terlihat pada gambar di bawah ini. Dan beri nama ValuesController
sebagai nama class tersebut.
1-8
Gambar 2-6. Menambah Web API Controller Class (v2).
Dari kedua hal yang telah dilakukan di atas dapat dilihat beberapa kesamaan berupa file-file
sebagai berikut :
1. WebApiConfig.cs yang terdapat pada folder App_Start.
2. Global.asax yang terdapat pada /.
3. ValuesController.cs yang terdapat pada folder Controllers.
File WebApiConfig.cs berfungsi sebagai konfigurasi Web API routes yang menentukan
bagaimana format url untuk mengakses class-class controller. Di bawah ini adalah isi dari file
ini.
WebApiConfig.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
namespace WebAPI.Empty
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
1-9
}
}
}
routeTemplate: "api/{controller}/{id}"
dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai
berikut :
http://[nama_domain]/api/[nama_controller]/
routeTemplate: "webapi/{controller}/{id}"
Maka format url untuk mengakses class controller akan menjadi sebagai berikut :
http://[nama_domain]/webapi/[nama_controller]
File kedua yang telah disebutkan adalah Global.asax dengan isi sebagai berikut :
Global.asax
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Routing;
namespace WebAPI.Empty
{
public class WebApiApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
GlobalConfiguration.Configure(WebApiConfig.Register);
}
}
}
File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class
WebApiConfig.cs saat aplikasi web dijalankan.
http://[nama_domain]/api/Values/
Sedangkan jika nama class controller adalah CalculateController.cs maka class ini akan
dapat diakses dengan cara menulis url berikut :
http://[nama_domain]/api/Calculate/
Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format
sebagai berikut :
[nama_controller]Controller.cs
1-10
Web API pada Existing Project Web
Dari penjelasan pada bagian sebelumnya maka jika ingin menambahkan class Web API
Controller pada project web yang telah ada, yaitu dengan cara menambahkan tiga file dan
dilakukan konfigurasi seperti yang telah disebutkan di atas.
Pada bagian ini akan diterangkan langkah-langkah untuk menambahkan Web API, dalam hal
ini adalah class Web API controller pada existing project web dengan tipe sebagai berikut :
1. ASP.NET Web Form Website.
2. ASP.NET Web Form Web Application.
3. ASP.NET MVC Web Application.
namespace ASPNET.WebForm.WebApp.App_Start
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
1-11
Global.asax.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Security;
using System.Web.SessionState;
using ASPNET.WebForm.WebApp.App_Start;
namespace ASPNET.WebForm.WebApp
{
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
GlobalConfiguration.Configure(WebApiConfig.Register);
}
}
}
ValuesController.cs
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)
{
}
}
}
1-12
ASP.NET MVC Web Application
Aplikasi web yang dibangun dengan ASP.NET MVC dibuat sebagai project Web Application
seperti halnya yang telah dijelaskan pada bagian ASP.NET Web Form Web Application di
atas, maka cara untuk menambahkan kemampuan Web API pada project ini mempunyai
langkah-langkah yang sama seperti cara di atas.
Yang perlu diperhatikan adalah urutan penulisan baris program pada file Global.asax di
bawah ini. Baris GlobalConfiguration.Configure(WebApiConfig.Register); harus
berada sebelum RouteConfig.RegisterRoutes(RouteTable.Routes);.
Global.asax
using ASPNET.MVC.WebApp.App_Start;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;
namespace ASPNET.MVC.WebApp
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
}
}
namespace ASPNET.MVC.WebApp.App_Start
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
1-13
}
}
}
ValuesController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace ASPNET.MVC.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)
{
}
}
}
1-14
4. Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfig.cs ke dalam
file Global.asax.
5. Menambahkan class Web API Controller pada folder App_Code.
Berikut ini adalah isi dari ketiga file tersebut.
WebApiConfig.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
/// <summary>
/// Summary description for WebApiConfig
/// </summary>
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
Global.asax
<%@ Application Language="C#" %>
<script runat="server">
WebApiConfig.Register(System.Web.Http.GlobalConfiguration.Configuration);
}
1-15
// Note: The Session_End event is raised only when the sessionstate
mode
// is set to InProc in the Web.config file. If session mode is set to
StateServer
// or SQLServer, the event is not raised.
</script>
ValuesController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
// 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)
{
}
}
1-16
Sehingga dapat dilihat pada halaman bantuan terdapat :
1. Organization.
2. Value.
Dapat dilihat pada gambar di atas, pada Organization controller hanya terdapat dua item
pada kolom API, hal ini dikarena memang method yang terdapat pada class tersebut hanya
dua method, seperti yang terlihat pada kode di bawah ini.
OrganizationController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
1-17
namespace WebAPI.Controllers
{
public class OrganizationController : ApiController
{
// GET api/<controller>
public IEnumerable<string> GetAll()
{
return new string[] { "value1", "value2" };
}
// GET api/<controller>/5
public string GetById(int id)
{
return "value";
}
}
}
Halaman bantuan ini hanya terdapat jika dibuat project dengan cara seperti yang diterangkan
pada bagian Project Web API pada bab ini. Sedangkan jika Web API dibuat dengan cara
seperti pada bagian Web API pada Existing Project Web di bab ini maka tidak akan ditemui
halaman bantuan seperti ini.
Untuk menambahkan halaman bantuan secara mandiri dapat dilakukan dengan mengikuti
langkah-langkah berikut ini.
Langkah pertama yang dilakukan adalah meninstall paket Microsoft ASP.NET Web API 2.1
Help Page dengan menggunakan fitur Manage NuGet Packages, dengan cara klik kanan pada
project yang diinginkan kemudian pilih fitur tersebut.
Pilih Microsoft ASP.NET Web API 2.1 Help Page kemudian klik tombol Install. Setelah proses
pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan
1-18
folder dan file pada project, yaitu terdapat folder Area seperti yang terlihat pada gambar di
bawah ini.
Selanjutnya untuk mengakses halaman ini dengan cara mengakses url berikut
http://[nama_domain]/Help/.
Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website,
baik untuk ASP.NET Web Form atau ASP.NET MVC.
HTTP Verb
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.
1-19
3. PUT, dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk
mengupdate item/resource yang telah ada. (procedure seperti pada point 2).
4. DELETE, dalam penggunaannya method untuk kelompok HTTP verb ini adalah
untuk menghapus item/resource yang telah ada. (procedure seperti pada point 2).
Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama
dengan HTTP verb di atas yaitu Get, Post, Put dan Delete sebagai prefix dari nama method
pada class controller. Sebagai contoh jika nama method adalah GetProduct, GetProductById
atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET.
Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan
termasuk dalam kelompok HTTP verb POST.
Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara
memberikan atribute pada method tersebut. Sebagai contoh pada kode di bawah ini.
ValuesController.cs
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
{
[HttpGet]
public IEnumerable<string> Retrieve()
{
return new string[] { "value1", "value2" };
}
[HttpGet]
public string Retrieve(int id)
{
return "value";
}
[HttpPost]
public void Insert([FromBody]string value)
{
}
[HttpPut]
public void Update(int id, [FromBody]string value)
{
}
[HttpDelete]
public void Delete(int id)
{
}
}
}
Dari kode di atas dapat dilihat penggunaan atribute [HttpGet], [HttpPost], [HttpPut] dan
[HttpDelete] untuk menentukan HTTP verb untuk akses API dari suatu method. Dengan
penggunaan atribute ini maka nama method dapat bebas sesuai keinginan.
1-20
Hasilnya dari kode di atas dapat dilihat pada daftar API yang ada pada halaman bantuan
seperit yang terlihat pada gambar di bawah ini.
http://[nama_domain]:port/api/[nama_controller]
Misal alamat akses project tersebut adalah http://localhost:11739/ dan nama class controller
adalah ValuesController.cs maka alamat yang diakses adalah :
http://localhost:11739/api/Values/
Tetapi akses via address bar pada web browser terbatas hanya untuk akses API yang bersifat
GET, seperti contoh di atas.
Untuk mengakses atau mencoba API yang bersifat POST, PUT atau DELETE tidak bisa
dilakukan dengan cara menuliskan url pada address bar di web browser. Untuk itu perlu
bantuan tool client untuk membantu mengakses Web API.
1-21
A Simple Test Client for ASP.NET Web API
Tool ini adalah tool client untuk ASP.NET Web API yang melekat pada halaman bantuan Web
API sebagai fitur tambahan. Tool ini hanya dapat digunakan untuk mengakses dan menguji
Web API pada project tempat tool ini diinstall. Sehingga tidak bisa digunakan untuk menguji
Web API lintas project atau lintas website.
Untuk menggunakan tool ini harus dipastikan pada project sudah memiliki halaman bantuan
Web API seperti yang telah dibahas pada bagian Halaman Bantuan ASP.NET Web API di
atas. Kemudian lakukan langkah-langkah berikut untuk menginstall tool ini.
Klik kanan pada project yang diinginkan, pilih Manage NuGet Packages, kemudian ketikkan
kata kunci A Simple Test Client for ASP.NET Web API pada kolom pencarian. Maka akan
dapat dilihat daftar berikut ini pada window Manage NuGet Packages.
Kemudian klik install dan setelah proses pengunduhan dan installasi selesai, maka langkah
selanjutnya adalah melakukan modifikasi file Api.cshtml yang terletak pada folder
Areas\HelpPage\Views\Help\ dengan kode seperti berikut ini.
Api.cshtml
@using System.Web.Http
@using WebAPI.Areas.HelpPage.Models
@model HelpPageApiModel
@{
var description = Model.ApiDescription;
ViewBag.Title = description.HttpMethod.Method + " " +
description.RelativePath;
}
<div id="body">
<section class="featured">
<div class="content-wrapper">
<p>
1-22
@Html.ActionLink("Help Page Home", "Index")
</p>
</div>
</section>
<section class="content-wrapper main-content clear-fix">
@Html.DisplayFor(m => Model)
</section>
</div>
@Html.DisplayForModel("TestClientDialogs")
@section Scripts {
@Html.DisplayForModel("TestClientReferences")
<link type="text/css" href="~/Areas/HelpPage/HelpPage.css"
rel="stylesheet" />
}
Baris yang ditambahkan pada file di atas adalah 6 baris terakhir tersebut. Hasil ini nanti akan
dapat dilihat ketika mengakses halaman bantuan, lebih tepatnya ketika salah satu API yang
terdapat pada daftar API yang dimiliki oleh controller di klik.
1-23
Gambar 2-13. Tombol Test API.
Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut :
Dari gambar di atas, pada form tersebut dapat dilihat HTTP verb GET yang digunakan untuk
mengakses API ini.
Dan berikut adalah ketika tombol Send diklik.
1-24
Gambar 2-15. Form Test Client response for Get api/Value.
Pada output di atas, terdapat tiga output yang dapat dilihat yaitu status, headers dan body,
secara kasat mata lebih lengkap informasi yang dilihat jika dibandingkan dengan akses pada
web browser.
Dan berikut ini adalah form-form yang dapat dapat dilihat ketika melihat detail API untuk
POST, PUT dan DELETE.
1-25
Gambar 2-17. Form Test Client response for POST api/Values.
1-26
Gambar 2-19. Form Test Client response for PUT api/Values.
1-27
Gambar 2-21. Form Test Client Response for DELETE api/Values.
Dengan bantuan tool ini maka semua API yang telah dibuat dapat diakses dan diuji. Tool ini
akan digunakan untuk menguji keberhasilan dari API yang akan dijelaskan pada ebook ini.
Rangkuman
Pada bab ini telah diterangkan beberapa hal untuk berkenalan dengan ASP.NET Web API.
Hal-hal yang telah dibahas pada bagian ini adalah :
1. Pembuatan aplikasi web ASP.NET Web API dengan menggunakan template porject
yang telah disediakan pada Visual Studio.
2. Pembuatan class controller Web API pada project yang telah ada sebelumnya.
Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung
serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses
dan digunakan.
3. Cara mengakses Web API yang telah dibuat.
4. Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat
daftar class controller serta API yang terdapat didalamnya.
5. Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk
mengakses dan menguji API yang telah dibuat.
1-28
3
Contoh-Contoh Web API
Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan
pembuatannya, pengaksesan dan pengujiannya dengan menggunakan tool test client yang
telah dibahas pada bab sebelumnya.
API Matematika
API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut
ini :
1. Menampilkan bilangan 1 sampai dengan 10.
2. Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10.
3. Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan.
API ini hanya terdiri atas method Get. Berikut adalah kode dari API ini :
MatematikaController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace ContohWebAPI.Controllers
{
public class MatematikaController : ApiController
{
/// <summary>
/// Mengembalikan bilangan 1 sampai 10.
/// </summary>
/// <returns></returns>
public IEnumerable<int> Get()
{
return new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
}
/// <summary>
/// Mengembalikan string dari angka yang dimasukkan
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public string Get(int id)
{
string result = String.Empty;
if (id.Equals(1))
{
result = "Satu";
}
else if (id.Equals(2))
1-29
{
result = "Dua";
}
else if (id.Equals(3))
{
result = "Tiga";
}
else if (id.Equals(4))
{
result = "Empat";
}
else if (id.Equals(5))
{
result = "Lima";
}
else if (id.Equals(6))
{
result = "Enam";
}
else if (id.Equals(7))
{
result = "Tujuh";
}
else if (id.Equals(8))
{
result = "Delapan";
}
else if (id.Equals(9))
{
result = "Sembilan";
}
else if (id.Equals(10))
{
result = "Sepuluh";
}
return result;
}
/// <summary>
/// Operasi matematika sederhana.
/// </summary>
/// <param name="op">operator</param>
/// <param name="bil1">bilangan pertama</param>
/// <param name="bil2">bilangan kedua</param>
/// <returns></returns>
public double Get(string op, string bil1, string bil2)
{
double result = 0;
int bilangan1 = Convert.ToInt32(bil1);
int bilangan2 = Convert.ToInt32(bil2);
if (op.Equals("tambah"))
{
result = bilangan1 + bilangan2;
}
else if (op.Equals("kurang"))
{
result = bilangan1 - bilangan2;
}
else if (op.Equals("kali"))
1-30
{
result = bilangan1 * bilangan2;
}
else if (op.Equals("bagi"))
{
result = bilangan1 / bilangan2;
}
return result;
}
}
}
Untuk menguji API ini digunakan tool test client yang telah dibahas sebelumnya.
1-32
2. Header yang berisikan informasi header dari output.
3. Body yang berisikan output sesuai dengan output method dari class controller berikut
public string Get(int id)
{
string result = String.Empty;
if (id.Equals(1))
{
result = "Satu";
}
else if (id.Equals(2))
{
result = "Dua";
}
else if (id.Equals(3))
{
result = "Tiga";
}
else if (id.Equals(4))
{
result = "Empat";
}
else if (id.Equals(5))
{
result = "Lima";
}
else if (id.Equals(6))
{
result = "Enam";
}
else if (id.Equals(7))
{
result = "Tujuh";
}
else if (id.Equals(8))
{
result = "Delapan";
}
else if (id.Equals(9))
{
result = "Sembilan";
}
else if (id.Equals(10))
{
result = "Sepuluh";
}
return result;
}
1-33
Gambar 3-5. Form akses API GET
api/Matematika?op={op}&bil1={bil1}&bil2={bil2}
if (op.Equals("tambah"))
{
result = bilangan1 + bilangan2;
}
else if (op.Equals("kurang"))
{
result = bilangan1 - bilangan2;
}
else if (op.Equals("kali"))
{
result = bilangan1 * bilangan2;
}
else if (op.Equals("bagi"))
{
result = bilangan1 / bilangan2;
}
return result;
}
Dari informasi tersebut akan dapat dilihat keterkaitan antara parameter yang terdapat pada
method dalam class controller dengan parameter untuk akses API ini.
Pada gambar berikut adalah response dari API ini.
1-34
Gambar 3-6. Response dari API GET api/Matematika?
?op={op}&bil1={bil1}&bil2={bil2}
1-35
Kemudian dilanjutkan dengan menambahkan tabel Mahasiswa. Pada gambar berikut ini
dapat dilihat atribut-atribut dari tabel Mahasiswa beserta contoh datanya.
Langkah selanjutnya adalah membuat class LINQ to SQL dengan nama Akademik.dbml.
Pada kasus ini, file Akademik.dbml ditambahkan ke dalam folder Models.
Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area
designer Akademik.dbml.
1-36
Gambar 3-9. Data class Mahasiswa.
Setelah persiapan hal-hal di atas telah dilakukan, maka dapat dapat ditambahkan class Web
API controller dengan nama MahasiswaController.cs ke dalam folder Controllers.
Berikut ini adalah kode dari class ini.
MahasiswaController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using ContohWebAPI.Models;
namespace ContohWebAPI.Controllers
{
public class MahasiswaController : ApiController
{
// GET api/<controller>
public IQueryable<Mahasiswa> GetMahasiswa()
{
AkademikDataContext db = new AkademikDataContext();
var data = db.Mahasiswas.Select(p => p);
return data;
}
// GET api/<controller>/5
public Mahasiswa GetMahasiswa(int nim)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
return item;
}
1-37
// POST api/<controller>
public void Post(int nim, string nama, string alamat, int umur,
string jurusan)
{
AkademikDataContext db = new AkademikDataContext();
db.Mahasiswas.InsertOnSubmit(item);
db.SubmitChanges();
}
// PUT api/<controller>/5
public void Put(int nim, string nama, string alamat, int umur,
string jurusan)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
item.Nama = nama;
item.Alamat = alamat;
item.Umur = umur;
item.Jurusan = jurusan;
db.SubmitChanges();
}
// DELETE api/<controller>/5
public void Delete(int nim)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
db.Mahasiswas.DeleteOnSubmit(item);
db.SubmitChanges();
}
}
}
Create
API yang berfungsi untuk create data baru adalah kode berikut ini :
public void Post(int nim, string nama, string alamat, int umur, string
jurusan)
{
AkademikDataContext db = new AkademikDataContext();
db.Mahasiswas.InsertOnSubmit(item);
1-38
db.SubmitChanges();
}
Pada gambar berikut diperlihatkan form POST api/Mahasiswa pada tool test client untuk
menguji API dari method di atas.
Dari pada gambar di bawah ini adalah respose dari aksi di atas.
Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa.
1-39
Gambar 3-12. Hasil proses create data.
Retrieve
Untuk mengambil data (retrieve) disediakan dua method dengan HTTP verb GET. Untuk
mengambil seluruh data mahasiswa digunakan method dengan kode berikut ini.
public IQueryable<Mahasiswa> GetMahasiswa()
{
AkademikDataContext db = new AkademikDataContext();
var data = db.Mahasiswas.Select(p => p);
return data;
}
Hasil dari API ini akan memberikan response berupa data berikut ini :
[
{"NIM":1,"Nama":"Reza","Alamat":"Alamat 1","Umur":30,"Jurusan":"Ilkom"},
{"NIM":2,"Nama":"Faisal","Alamat":"Alamat 2","Umur":31,"Jurusan":"Ilkom"},
{"NIM":3,"Nama":"Fahlevi","Alamat":"Alamat 3","Umur":32,"Jurusan":"Ilkom"},
{"NIM":4,"Nama":"Adi","Alamat":"Banjarbaru","Umur":25,"Jurusan":"Ilkom"}
]
1-40
Dan gambar berikut memperlihatkan response dari GET api/Mahasiswa.
Sedangkan untuk mengambil data mahasiswa dengan nim tertentu dapat menggunakan
method dengan kode di bawah ini :
public Mahasiswa GetMahasiswa(int nim)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
return item;
}
1-41
Hasil dari API ini adalah sebagai berikut :
{
"NIM":4,
"Nama":"Adi",
"Alamat":"Banjarbaru",
"Umur":25,
"Jurusan":"Ilkom"
}
Dan gambar berikut ini adalah gambar response dari API ini.
Update
Untuk update data mahasiswa digunakan kode method berikut ini.
public void Put(int nim, string nama, string alamat, int umur, string
jurusan)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
item.Nama = nama;
item.Alamat = alamat;
item.Umur = umur;
item.Jurusan = jurusan;
db.SubmitChanges();
}
Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API
ini.
1-42
Gambar 3-17. Form PUT api/Mahasiswa.
Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa.
1-43
Delete
Kode berikut di bawah ini adalah method yang digunakan untuk menghapus data
berdasarkan nim yang dimasukkan.
public void Delete(int nim)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
db.Mahasiswas.DeleteOnSubmit(item);
db.SubmitChanges();
}
1-44
Penggunaan Atribute [FromBody]
Pada contoh kode untuk input (create) dan update data pada bagian API CRUD LINQ to
SQL dapat dilihat parameter-parameter dari method sesuai dengan atribute dari tabel
Mahasiswa atau sesuai dengan class data LINQ to SQL.
Dan berikut adalah kode untuk input (create) dan update data.
public void Post(int nim, string nama, string alamat, int umur, string
jurusan)
{
AkademikDataContext db = new AkademikDataContext();
db.Mahasiswas.InsertOnSubmit(item);
db.SubmitChanges();
}
// PUT api/<controller>/5
public void Put(int nim, string nama, string alamat, int umur, string
jurusan)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
item.Nama = nama;
item.Alamat = alamat;
item.Umur = umur;
item.Jurusan = jurusan;
db.SubmitChanges();
}
db.Mahasiswas.InsertOnSubmit(mhs);
db.SubmitChanges();
1-45
}
// PUT api/<controller>/5
public void Put(int nim, [FromBody]Mahasiswa mhs)
{
AkademikDataContext db = new AkademikDataContext();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
item.Nama = mhs.Nama;
item.Alamat = mhs.Alamat;
item.Umur = mhs.Umur;
item.Jurusan = mhs.Jurusan;
db.SubmitChanges();
}
Pada tahap pengujian, dapat dilihat form POST api/Mahasiswa seperti pada gambar di bawah
ini.
Berbeda dengan form POST sebelumnya, pada form di atas tidak terdapat lagi kolom
parameter yang berfungsi untuk mengisi nilai-nilai parameter untuk method POST.
Pada method Post terdapat parameter [FromBody] Mahasiswa mhs, hal ini membuat cara
input nilai data menjadi berbeda. Hal ini terlihat terdapat area Body pada form di atas. Isi
dari input pada area Body ini adalah objek Mahasiswa yang ditulis dalam format JSON seperti
berikut :
{
"NIM": 6,
"Nama": "Nama 6",
"Alamat": "Alamat 6",
"Umur": 21,
"Jurusan": "Ilkom"
}
Pada form PUT juga terdapat perbedaan dengan form PUT sebelumnya seperti yang terlihat
pada gambar di bawah ini.
1-46
Gambar 3-23. Form PUT api/Mahasiswa.
Pada kedua gambar di atas dapat dilihat perbedaan yang terlihat pada bagian :
1. Status, response yang diberikan untuk API bertipe GET memiliki status 200/OK
sedangkan untuk API bertipe POST memiliki nilai status 204/No Content.
2. Body, pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON
sebagai response GET, sedangkan pada bagian body di form response POST bernilai
kosong.
1-47
Pada bagian ini akan dibuat class controller dengan cara yang sedikit berbeda dengan API
pada bagian sebelumnya. Berikut ini adalah langkah-langkah yang akan dilakukan pada
bagian ini.
Gambar 3-25. Window Add New Item ADO.NET Entity Data Model -
Akademik.edmx
Pada kolom input Name berikan nilai Akademik.edmx kemudian klik tombol Add.
1-48
Gambar 3-27. Pembuatan connection string.
1-49
Gambar 3-29. Pemilihan tabel.
Class OutputModel.cs
Hal lain yang perlu disiapkan adalah membuat class yang akan menjadi model untuk output
response dari API. Format output tersebut akan seperti berikut ini :
{
"status": "sample string 1",
"data": {},
"message": "sample string 3"
}
1-50
Keterangan :
1. status, adalah atribut yang memberikan nilai success dan error dari API yang diakses.
2. data, adalah atribut yang akan memberikan data dari API yang diakses dalam format
JSON. Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan
memberikan data mahasiswa seperti contoh berikut ini.
{
"status":"success",
"data":[
{
"NIM":1,
"Nama":"Reza",
"Alamat":"Alamat 1",
"Umur":30,"Jurusan":"Ilkom"
},
{
"NIM":2,
"Nama":"Faisal",
"Alamat":"Alamat 2",
"Umur":31,"Jurusan":"Ilkom"
}
],
"message":""
}
3. message, atribut ini akan berisi string yang berisi pesan yang berhubungan dengan
operasi yang dilakukan, sebagai contoh pesan untuk memberitahukan jika data telah
berhasil disimpan atau pesan jika data telah berhasil dihapus.
Untuk membuat format output response seperti itu maka dibuat class OutputModel.cs
seperti berikut ini.
OutputModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace API.CRUD.EF.Models
{
public class OutputModel
{
public string status { get; set; }
public object data { get; set; }
public string message { get; set; }
}
}
Class MahasiswaController.cs
Selanjutnya adalah membuat class Web API Controller dengan nama
MahasiswaController.cs. Method-method pada class ini akan berbeda dari segi penamaan
dan jenisnya jika dibandingkan pada contoh sebelumnya. Seluruh method pada class ini akan
mengembalikan output (return value) berupa object dari class OutputModel.cs yang telah
dibuat sebelumnya. Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet],
[HttpPost], [HttpPut] dan [HttpDelete] pada method yang bersesuaian.
1-51
Berikut ini adalah kode dari class MahasiswaController.cs.
MahasiswaController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using API.CRUD.EF.Models;
namespace API.CRUD.EF.Controllers
{
public class MahasiswaController : ApiController
{
[HttpGet]
public OutputModel Select()
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
var data = db.Mahasiswas.Select(p => p);
output.status = "success";
output.message = String.Empty;
output.data = data;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
[HttpGet]
public OutputModel SelectById(int nim)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
output.status = "success";
output.message = String.Empty;
output.data = item;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
1-52
return output;
}
[HttpPost]
public OutputModel Save([FromBody]Mahasiswa mhs)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
db.Mahasiswas.Add(mhs);
db.SaveChanges();
output.status = "success";
output.message = "Data mahasiswa berhasil disimpan.";
output.data = String.Empty;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
[HttpPut]
public OutputModel Update(int nim, [FromBody]Mahasiswa mhs)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
item.Nama = mhs.Nama;
item.Alamat = mhs.Alamat;
item.Umur = mhs.Umur;
item.Jurusan = mhs.Jurusan;
db.SaveChanges();
output.status = "success";
output.message = "Data mahasiswa dengan NIM " + nim + "
berhasil diupdate.";
output.data = String.Empty;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
1-53
[HttpDelete]
public OutputModel Remove(int nim)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
db.Mahasiswas.Remove(item);
db.SaveChanges();
output.status = "success";
output.message = "Data mahasiswa dengan NIM " + nim + "
berhasil dihapus.";
output.data = String.Empty;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
}
}
Dapat diperhatikan setiap method di atas adalah berupa function yang artinya akan
mengembalikan nilai, dalam hal ini adalah berupa object dari class OutputModel.
Create
Berikut ini adalah method yang berfungsi untuk input data baru ke dalam database.
Method ini merupakan function yang mengembalikan nilai dan method ini memiliki atribut
[HttpPost].
[HttpPost]
public OutputModel Save([FromBody]Mahasiswa mhs)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
db.Mahasiswas.Add(mhs);
db.SaveChanges();
output.status = "success";
output.message = "Data mahasiswa berhasil disimpan.";
output.data = String.Empty;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
1-54
}
Dari gambar di atas dapat dilihat response dari API POST api/Mahasiswa memberikan output
seperti yang terlihat pada bagian body.
Retrieve
Untuk aksi retrieve terdapat dua method, yaitu untuk menampilkan seluruh dan untuk
menampilkan sebuah data yang dipilih sesuai dengan nilai NIM mahasiswa yang
dimasukkan.
Berikut adalah kode dari kedua method tersebut.
[HttpGet]
public OutputModel Select()
{
OutputModel output = new OutputModel();
1-55
try
{
AkademikEntities db = new AkademikEntities();
var data = db.Mahasiswas.Select(p => p);
output.status = "success";
output.message = String.Empty;
output.data = data;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
[HttpGet]
public OutputModel SelectById(int nim)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
output.status = "success";
output.message = String.Empty;
output.data = item;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
Berikut adalah form dan response dari API api/Mahasiswa untuk menampilkan seluruh data.
1-56
Gambar 3-34. Response API GET api/Mahasiswa.
Sedangkan berikut adalah form dan response dari API GET api/Mahasiswa?nim={nilai_nim}.
1-57
Update
Berikut adalah kode dari method yang akan berfungsi sebagai API untuk update data pada
database.
[HttpPut]
public OutputModel Update(int nim, [FromBody]Mahasiswa mhs)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
item.Nama = mhs.Nama;
item.Alamat = mhs.Alamat;
item.Umur = mhs.Umur;
item.Jurusan = mhs.Jurusan;
db.SaveChanges();
output.status = "success";
output.message = "Data mahasiswa dengan NIM " + nim + " berhasil
diupdate.";
output.data = String.Empty;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
1-58
Gambar 3-38. Response PUT api/Mahasiswa.
Delete
Di bawah ini adalah method yang berfungsi sebagai API untuk menghapus data yang dipilih.
[HttpDelete]
public OutputModel Remove(int nim)
{
OutputModel output = new OutputModel();
try
{
AkademikEntities db = new AkademikEntities();
Mahasiswa item = db.Mahasiswas.Where(p =>
p.NIM.Equals(nim)).Single<Mahasiswa>();
db.Mahasiswas.Remove(item);
db.SaveChanges();
output.status = "success";
output.message = "Data mahasiswa dengan NIM " + nim + " berhasil
dihapus.";
output.data = String.Empty;
}
catch (Exception ex)
{
output.status = "error";
output.message = ex.Message;
output.data = null;
}
return output;
}
Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API
ini.
1-59
Gambar 3-39. Form DELETE api/Mahasiswa.
Berikut ini adalah contoh response jika terjadi kesalahan, misal dimasukkan nilai NIM yang
tidak terdapat dalam tabel Mahasiswa.
1-60
4
Pemrograman Akses Web API
Pada bagian ini akan dijelaskan bagaimana mengakses Web API yang telah dibuat secara
pemrograman dengan beberapa teknologi yang telah tersedia pada .NET Platform seperti
Windows Form, ASP.NET Web Form atau Windows Phone.
Matematika.Console
Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console. Aplikasi
console yang dibuat akan mengakses class Web API controller MatematikaController.cs
yang telah dibuat sebelumnya.
Berikut adalah langkah-langkah yang akan dilakukan untuk membuat aplikasi sederhana ini.
Setelah project console dibuat, maka langkah selanjutnya adalah menambahkan Microsoft
ASP.NET Web API 2.1 Client Library pada project tersebut. Cara mudah untuk melakukan
ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata
kunci berikut Microsoft.AspNet.WebApi.Client maka akan didapat daftar berikut ini.
Gambar 4-1. Manage NuGet Packages Microsoft ASP.NET Web API 2.1 Client
Library.
1-61
Gambar 4-2. Installasi Microsoft ASP.NET Web API 2.1 Client Library.
Hasilnya dapat dilihat pada folder Reference, terdapat tambahan namespace baru seperti
System.Net.Http dan System.Net.Http.Formating.
1-62
Selanjutnya pada class Program.cs akan ditambah baris-baris kode seperti berikut ini.
Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
namespace Matematika.Console
{
class Program
{
static void Main(string[] args)
{
RunAsync().Wait();
System.Console.ReadKey();
}
System.Console.WriteLine(response.Content.ReadAsStringAsync().Result);
}
else
{
System.Console.WriteLine(response.StatusCode);
}
System.Console.WriteLine();
System.Console.WriteLine(response.Content.ReadAsStringAsync().Result);
}
else
{
System.Console.WriteLine(response.StatusCode);
}
System.Console.WriteLine();
response = await
client.GetAsync("api/Matematika?op=tambah&bil1=13&bil2=23");
if (response.IsSuccessStatusCode)
{
1-63
System.Console.WriteLine(response.Content.ReadAsStringAsync().Result);
}
else
{
System.Console.WriteLine(response.StatusCode);
}
}
}
}
}
Yang perlu diperhatikan pada kode di atas, terdapat penggunaan namespace agar bisa
menggunakan library Web API Client seperti yang terlihat pada baris di bawah ini.
using System.Net.Http;
using System.Net.Http.Headers;
Kemudian untuk mengakses salah satu API pada class controller MatematikaController.cs
digunakan kode sebagai berikut.
using (var client = new HttpClient())
{
client.BaseAddress = new Uri("http://localhost:8492/");
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/json"));
System.Console.WriteLine(response.Content.ReadAsStringAsync().Result);
}
else
{
System.Console.WriteLine(response.StatusCode);
}
...
}
Baris di atas menentukan output yang akan didapat, jika ingin format output berupa XML
maka baris di atas dapat diubah menjadi berikut ini.
1-64
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/xml"));
Dan selanjutnya untuk mengakses API yang diinginkan dapat menggunakan kode berikut.
HttpResponseMessage response = await client.GetAsync("api/Matematika/");
Sedangkan untuk mendapatkan hasil dari response tersebut dapat menggunakan method
ReadAsStringAsync().Result untuk kasus ini. Selain method itu masih terdapat beberapa
method serupa untuk kebutuhan yang berbeda.
Pada contoh ini aplikasi hanya mengakses API bertipe GET, karena API dari
MatematikaController.cs hanya terdapat method-method kelompok HTTP verb GET saja.
Mahasiswa.Console
Contoh pada bagian ini akan mengakses API dari class controller MahasiswaController.cs
yang telah dicontohkan pada bagian API CRUD LINQ to SQL. Berikut ini adalah kode
lengkap dari aplikasi Mahasiswa.Console.
Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
namespace Mahasiswa.Console
{
class Program
{
static void Main(string[] args)
{
RunAsync().Wait();
System.Console.ReadKey();
}
1-65
static async Task RunAsync()
{
string serviceUrl = "api/Mahasiswa/";
using (var client = new HttpClient())
{
client.BaseAddress = new Uri("http://localhost:8492/");
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response =
client.PostAsJsonAsync(serviceUrl, mahasiswa).Result;
if (response.IsSuccessStatusCode)
{
System.Console.WriteLine("Data mahasiswa berhasil
disimpan.");
}
else
{
System.Console.WriteLine("{0} ({1})",
(int)response.StatusCode, response.ReasonPhrase);
}
System.Console.WriteLine();
System.Console.WriteLine();
1-66
response = client.PutAsJsonAsync(serviceUrl+"?nim=23",
mahasiswa).Result;
if (response.IsSuccessStatusCode)
{
System.Console.WriteLine("Data mahasiswa berhasil
diupdate.");
}
else
{
System.Console.WriteLine("{0} ({1})",
(int)response.StatusCode, response.ReasonPhrase);
}
System.Console.WriteLine();
System.Console.WriteLine();
System.Console.WriteLine();
1-67
{
System.Console.WriteLine("{0} ({1})",
(int)response.StatusCode, response.ReasonPhrase);
}
}
}
}
Pada kode di atas terdapat class Mahasiswa yang berfungsi sebagai model untuk kebutuhan
objek penampung untuk digunakan dan dikirimkan saat melakukan proses insert dan update
data.
Pada contoh kode di atas diperkenalan method-method berikut ini :
1. ReadAsAsync, method ini berfungsi untuk mengakses API GET.
2. PostAsJsonAsync, method ini berfungsi untuk mengakses API POST.
3. PutAsJsonAsync, method ini berfungsi untuk mengakses API PUT.
4. DeleteAsync, method ini berfungsi untuk mengakses API DELETE.
Create
Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini.
// Input data mahasiswa baru
Mahasiswa mahasiswa = new Mahasiswa();
mahasiswa.NIM = "23";
mahasiswa.Nama="Nama 23";
mahasiswa.Umur=23;
mahasiswa.Alamat = "Alamat 23";
mahasiswa.Jurusan = "Ilkom";
Terlebih dahulu dapat dibuat objek mahasiswa yang akan disimpan dengan mempergunakan
class Mahasiswa yang ada. Kemudian diakses API POST dengan menggunakan method
PostAsJsonAsync.
Retrieve
Untuk mengambil data dan menampilkannya digunakan baris kode berikut ini.
response = await client.GetAsync(serviceUrl);
if (response.IsSuccessStatusCode)
{
var mhs =
response.Content.ReadAsAsync<IEnumerable<Mahasiswa>>().Result;
foreach (Mahasiswa m in mhs)
{
System.Console.WriteLine(m.Nama);
}
}
else
1-68
{
System.Console.WriteLine("{0} ({1})", (int)response.StatusCode,
response.ReasonPhrase);
}
Pada kode di atas untuk menampung response langung ke dalam collection objek mahasiswa
digunakan method ReadAsAsync, sehingga dengan mudah nilainya ditampilkan dengan cara
melakukan iterasi.
Update
Untuk melakukan update data digunakan method PutAsJsonAsync yang menggunaannya
dapat dilihat pada baris kode di bawah ini.
// Update data mahasiswa
mahasiswa = new Mahasiswa();
mahasiswa.NIM = "24";
mahasiswa.Nama = "Nama 24";
mahasiswa.Umur = 24;
mahasiswa.Alamat = "Alamat 24";
mahasiswa.Jurusan = "Ilkom";
Delete
Sedangkan untuk menghapus data dapat digunakan method DeleteAsync, yang
penggunaannya dapat dilihat pada kode di bawah ini.
response = client.DeleteAsync(serviceUrl+"?nim=23").Result;
Mahasiswa.Website
Untuk mengakses Web API dari aplikasi web dapat menggunakan cara yang sama dengan
contoh-contoh di atas. Pada project Web Application atau Website yang dipergunakan juga
perlu ditambahkan library Microsoft.AspNet.WebApi.Client seperti yang juga
ditambahkan pada contoh di atas.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label_Message" runat="server" Text=""></asp:Label>
1-69
<asp:GridView ID="GridView_Main" runat="server"></asp:GridView>
</div>
</form>
</body>
</html>
Pada contoh di atas terdapat class Mahasiswa, class ini dapat dipisahkan pada file tersendiri
jika diinginkan. Misal saja dibuat class Mahasiswa.cs yang disimpan pada folder App_Code
pada project Website.
1-70
Berikut adalah hasil yang dapat dilihat dari halaman di atas.
HttpResponseMessage response =
client.PostAsJsonAsync("api/Mahasiswa/", mhs).Result;
if (response.IsSuccessStatusCode)
{
Label_Message.Text = "Data mahasiswa berhasil disimpan.";
TextBox_NIM.Text = String.Empty;
TextBox_Nama.Text = String.Empty;
TextBox_Umur.Text = String.Empty;
TextBox_Alamat.Text = String.Empty;
TextBox_Jurusan.Text = String.Empty;
1-71
GetDataMahasiswa();
}
else
{
Label_Message.Text = "Error Code" + response.StatusCode + " :
Message - " + response.ReasonPhrase;
}
}
Dari contoh baris kode di atas maka tidak ada perbedaan yang mencolok antara baris kode
dari aplikasi console yang telah dibuat.
Berikut adalah tampilan sederhana dari halaman web ini.
Memilih Mahasiswa
Pada bagian ini akan dicontohkan cara untuk memilih satu mahasiswa dari data mahasiswa
yang ditampilkan pada GridView. Untuk kebutuhan ini maka perlu ada modifikasi pada
kode yang sudah ada, yaitu dengan mengganti kode GridView menjadi seperti berikut ini.
<asp:GridView ID="GridView_Main"
OnSelectedIndexChanged="GridView_Main_SelectedIndexChanged"
DataKeyNames="NIM" runat="server">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
1-72
HttpResponseMessage response = client.GetAsync("api/Mahasiswa?nim=" +
id).Result;
if (response.IsSuccessStatusCode)
{
Mahasiswa item = response.Content.ReadAsAsync<Mahasiswa>().Result;
TextBox_NIM.Text = item.NIM;
TextBox_Nama.Text = item.Nama;
TextBox_Umur.Text = item.Umur.ToString();
TextBox_Alamat.Text = item.Alamat;
TextBox_Jurusan.Text = item.Jurusan;
}
else
{
Label_Message.Text = "Error Code" + response.StatusCode + " :
Message - " + response.ReasonPhrase;
}
}
Dan berikut adalah tampilan dari halaman web ini setelah dilakukan modifikasi dengan baris
kode di atas. Pada GridView terdapat kolom yang berisi link untuk memilih record
mahasiswa yang diinginkan. Pada contoh di bawah ini adalah ketika link record mahasiswa
dengan NIM=1 diklik.
1-73
string id = Convert.ToString(GridView_Main.SelectedValue);
HttpResponseMessage response =
client.PutAsJsonAsync("api/Mahasiswa?nim=" + id, mhs).Result;
if (response.IsSuccessStatusCode)
{
Label_Message.Text = "Data mahasiswa berhasil diupdate.";
TextBox_NIM.Text = String.Empty;
TextBox_Nama.Text = String.Empty;
TextBox_Umur.Text = String.Empty;
TextBox_Alamat.Text = String.Empty;
TextBox_Jurusan.Text = String.Empty;
Button_Update.Visible = true;
GetDataMahasiswa();
}
else
{
Label_Message.Text = "Error Code" + response.StatusCode + " :
Message - " + response.ReasonPhrase;
}
}
1-74
Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView.
<asp:GridView ID="GridView_Main"
OnSelectedIndexChanged="GridView_Main_SelectedIndexChanged"
OnRowDeleting="GridView_Main_RowDeleting"
DataKeyNames="NIM" runat="server">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
</asp:GridView>
Pada baris di atas juga terdapat tambahan event OnRowDeleting yang akan memanggil
method GridView_Main_RowDeleting dengan baris kode di bawah ini.
protected void GridView_Main_RowDeleting(object sender,
GridViewDeleteEventArgs e)
{
string id =
GridView_Main.DataKeys[e.RowIndex].Values["NIM"].ToString();
if (response.IsSuccessStatusCode)
{
GetDataMahasiswa();
}
else
{
Label_Message.Text = "Error Code" + response.StatusCode + " :
Message - " + response.ReasonPhrase;
}
}
1-75
5
Penutup
Sebagai kalimat penutup, ebook ini dibuat untuk para developer sebagai pengenalan awal
pada ASP.NET Web API. Pada ebook ini hanya membahas hal-hal dasar seperti :
1. Template project Web API.
2. Cara akses Web API.
3. Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk
menguji API.
4. Contoh-contoh program untuk mengakses Web API yang telah dibuat.
Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan
Web API.
Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti :
1. Authentifikasi.
2. Keamanan (security).
3. Dan lain-lain.
Kritik dan saran dapat ditujukan langsung via email ke reza.faisal [at] gmail [dot] com.
1-76
1-77
1-78