1 2 Kata Pengantar Puji dan syukur diucapkan kepada Allah SWT atas selesainya ebook sederhana yang berjudul Pengenalan ASP.NET Web API. Pada ebook ini...
Kata Pengantar 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.
Banjarmasin, 7 April 2014
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
Halaman Bantuan ASP.NET Web API ..................................................... 2-16 HTTP Verb .................................................................................................... 2-19 Mengakses Web API.................................................................................... 2-21 A Simple Test Client for ASP.NET Web API .................................................. 2-22
3 Contoh-Contoh Web API...................................................................... 3-29 API Matematika............................................................................................ 3-29 Menampilkan Bilangan 1 sampai 10 ................................................................ 3-31 Menampilkan Kata dari Angka yang Dimasukkan ....................................... 3-32 Melakukan Operasi Matematika Sederhana pada Dua Bilangan ................ 3-33
API CRUD – LINQ to SQL ......................................................................... 3-35 Create .................................................................................................................... 3-38 Retrieve ................................................................................................................. 3-40 Update .................................................................................................................. 3-42 Delete .................................................................................................................... 3-44 Penggunaan Atribute [FromBody] ................................................................... 3-45
API CRUD – Entity Framework................................................................. 3-47 ADO.NET Entity Data Model ........................................................................... 3-48 II
Class OutputModel.cs ........................................................................................ 3-50 Class MahasiswaController.cs........................................................................... 3-51 Create .................................................................................................................... 3-54 Retrieve ................................................................................................................. 3-55 Update .................................................................................................................. 3-58 Delete .................................................................................................................... 3-59
Mahasiswa.Website ..................................................................................... 4-69 Menampilkan Data Mahasiswa ........................................................................ 4-69 Tambah Data Mahasiswa ................................................................................... 4-71 Memilih Mahasiswa ........................................................................................... 4-72 Update Data Mahasiswa .................................................................................... 4-73 Menghapus Data Mahasiswa ............................................................................ 4-74
Mahasiswa.WP.............................................................................................. 4-75 Project Windows Phone App ............................................................................ 4-76 Menampilkan Data Mahasiswa ........................................................................ 4-78 Memilih dan Update Data Mahasiswa ............................................................ 4-82 Tambah Data Mahasiswa ................................................................................... 4-85
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 Gambar 4-10. Manage NuGet Packages untuk project Windows Phone 8. .............................4-76 Gambar 4-11. Instalasi library Microsoft.AspNet.WebApi.Client pada project Windows Phone 8. ......................................................................................................................................4-76 Gambar 4-12. Project Windows Phone App. ................................................................................4-77 Gambar 4-13. MahasiswaPage.xaml ..............................................................................................4-77 Gambar 4-14. WMAppManifest.xml. .............................................................................................4-78 Gambar 4-15. MahasiswaPage.xaml ..............................................................................................4-81 Gambar 4-16. MahasiswaDetailPage.xaml. ...................................................................................4-82 Gambar 4-17. MahasiswaAddPage.xaml. .....................................................................................4-88
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
Internet Database Server
Web Browser pada komputer
Web Server
Gambar 1-1. 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 Service
Aplikasi Mobile
Internet Database Server
Web Server
Gambar 1-2. Aplikasi mobile. 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 statusstatus 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 fungsifungsi pada layanan tersebut untuk melakukan proses-proses tersebut. Keberadaan web service sebagai perantara seperti gambar di atas mempunyai beberapa manfaat, diantaranya adalah : 1. 2.
Layanan ini dapat lebih mengamankan data pada database server, hal ini dikarena database tidak langsung diakses oleh aplikasi. 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.
Aplikasi Mobile
Web Service
Internet Database Server
Web Server
Aplikasi Desktop
Aplikasi Web
Gambar 1-3. HTTP Service 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.
ASP.NET & Visual Studio 2013 Terdapat dua tipe aplikasi web ASP.NET yang dibangun dengan menggunakan Visual Studio, yaitu Web Site dan Web Application. Untuk lebih mengenal lebih dalam mengenai kedua hal tersebut bisa memanfaatkan ebook-ebook berikut ini yang dapat diunduh di http://www.rezafaisal.net/?p=902.
Gambar 1-4. Ebook seri ASP.NET.
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. 2.
Project Web API, yaitu membuat kode program Web API secara khusus dari awal dengan template project yang telah disediakan. 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.
Project Web API Berikut adalah langkah-langkah yang dilakukan untuk membuat project Web API. Langkah pertama adalah membuat project baru dengan cara klik File > New Project. Pada window Add New Project pilih Visual C# > Web > ASP.NET Web Application.
Gambar 2-1. Window Add New Project. 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.
Gambar 2-3. Solution Explorer. 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.
Gambar 2-4. Web API pada Empty template. 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. 2. 3.
WebApiConfig.cs yang terdapat pada folder App_Start. Global.asax yang terdapat pada /. 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 // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );
1-9
} } }
Pada kode di atas dapat dilihat baris di bawah ini. routeTemplate: "api/{controller}/{id}"
dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai berikut : http://[nama_domain]/api/[nama_controller]/
Jika kode pada WebApiConfig.cs mempunyai baris sebagai berikut : 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. Pada
kedua
project
di atas nama class controller yang ValuesController.cs maka dapat ditulis url sebagai berikut :
telah
dibuat
adalah
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. 2. 3.
ASP.NET Web Form Website. ASP.NET Web Form Web Application. ASP.NET MVC Web Application.
ASP.NET Web Form Web Application Pada project Web Application secara default sudah memiliki file Global.asax sehingga yang perlu dilakukan adalah : Menambahkan folder App_Start. Menambahkan file WebApiConfig.cs ke dalam folder App_Start dengan isi seperti yang telah dijelaskan pada bagian sebelumnya. Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfig.cs ke dalam file Global.asax. Menambahkan folder Controllers. Menambahkan class Web API Controller pada folder Controllers, pada saat melakukan proses ini secara otomatis akan ditambahkan reference yang berhubungan dengan Web API seperti System.Web.Http dan lain-lain.
1. 2. 3. 4. 5.
Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut. WebApiConfig.cs
namespace ASPNET.WebForm.WebApp.App_Start { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); 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
namespace ASPNET.WebForm.WebApp.Controllers { public class ValuesController : ApiController { // GET api/ public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; } // GET api//5 public string Get(int id) { return "value"; } // POST api/ public void Post([FromBody]string value) { } // PUT api//5 public void Put(int id, [FromBody]string value) { } // DELETE api//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
namespace ASPNET.MVC.WebApp.App_Start { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );
namespace ASPNET.MVC.WebApp.Controllers { public class ValuesController : ApiController { // GET api/ public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; } // GET api//5 public string Get(int id) { return "value"; } // POST api/ public void Post([FromBody]string value) { } // PUT api//5 public void Put(int id, [FromBody]string value) { } // DELETE api//5 public void Delete(int id) { } } }
ASP.NET Web Form Website Aplikasi web yang dibangun dengan menggunakan template Website mempunyai beberapa perbedaan prilaku jika dibandingkan dengan template Web Application. Oleh karena itu ketika menambahkan class Web API Controller akan terdapat perbedaan langkah-langkah yang dilakukan. Berikut ini adalah langkah-langkah untuk menambahkan class controller : 1. 2. 3.
/// <summary> /// Summary description for WebApiConfig /// 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"> void Application_Start(object sender, EventArgs e) { // Code that runs on application startup WebApiConfig.Register(System.Web.Http.GlobalConfiguration.Configuration); } void Application_End(object sender, EventArgs e) { // Code that runs on application shutdown } void Application_Error(object sender, EventArgs e) { // Code that runs when an unhandled error occurs } void Session_Start(object sender, EventArgs e) { // Code that runs when a new session is started } void Session_End(object sender, EventArgs e) { // Code that runs when a session ends.
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. } ValuesController.cs
public class ValuesController : ApiController { // GET api/ public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; } // GET api//5 public string Get(int id) { return "value"; } // POST api/ public void Post([FromBody]string value) { } // PUT api//5 public void Put(int id, [FromBody]string value) { } // DELETE api//5 public void Delete(int id) { } }
Halaman Bantuan ASP.NET Web API Halaman bantuan ASP.NET Web API memberikan informasi daftar class controller dan daftar method didalamnya. Seperti yang dapat dilihat pada gambar di bawah ini. Pada contoh di bawah ini, terdapat dua class controler yaitu : 1. 2.
OrganizationController.cs. ValuesController.cs.
1-16
Sehingga dapat dilihat pada halaman bantuan terdapat : 1. 2.
Organization. Value.
Gambar 2-7. Halaman bantuan Web API. 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
namespace WebAPI.Controllers { public class OrganizationController : ApiController { // GET api/ public IEnumerable<string> GetAll() { return new string[] { "value1", "value2" }; } // GET api//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.
Gambar 2-8. Window Manage NuGet Packages. 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.
Gambar 2-9. Folder Area. Selanjutnya untuk mengakses halaman ini dengan cara mengakses http://[nama_domain]/Help/.
url berikut
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.
2.
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. 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). DELETE, dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk menghapus item/resource yang telah ada. (procedure seperti pada point 2).
4.
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
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.
Gambar 2-10. Daftar API.
Mengakses Web API Setelah penjelasan di atas, pada bagian ini akan dijelaskan bagaimana mengakses dan menguji Web API. Jika project Web API masih dalam tahap development di Visual Studio, maka pastikan terlebih dahulu telah project aplikasi web tersebut telah dijalankan dan IIS Express sebagai web server masih aktif. Cara yang dapat dilakukan untuk melakukan hal ini adalah dengan klik kanan pada project kemudian pilih Debug > Start new instance. Atau jika pada Website, klik kanan pada website kemudian pilih View in Browser. Maka secara otomatis web browser akan dijalankan dan halaman default web pada project akan ditampilkan. Untuk mengakses API, cukup ketikkan pada address bar web browser dengan format seperti berikut : 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.
Gambar 2-11. Manage NuGet Package – Microsoft.AspNet.WebApi.Client.
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
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.
Gambar 2-12. Daftar API pada class controller Values.
1-23
Gambar 2-13. Tombol Test API. Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut :
Gambar 2-14. Form Test Client – Get api/Values. 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.
Gambar 2-16. Form Test Client – Post api/Values.
1-25
Gambar 2-17. Form Test Client – response for POST api/Values.
Gambar 2-18. Form Test Client – PUT api/Values
1-26
Gambar 2-19. Form Test Client – response for PUT api/Values.
Gambar 2-20. Form Test Client – Delete 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. 2.
3. 4. 5.
Pembuatan aplikasi web ASP.NET Web API dengan menggunakan template porject yang telah disediakan pada Visual Studio. 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. Cara mengakses Web API yang telah dibuat. Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat daftar class controller serta API yang terdapat didalamnya. 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. 2. 3.
Menampilkan bilangan 1 sampai dengan 10. Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10. Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan.
API ini hanya terdiri atas method Get. Berikut adalah kode dari API ini : MatematikaController.cs
namespace ContohWebAPI.Controllers { public class MatematikaController : ApiController { /// <summary> /// Mengembalikan bilangan 1 sampai 10. /// /// public IEnumerable Get() { return new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; } /// <summary> /// Mengembalikan string dari angka yang dimasukkan /// /// <param name="id"> /// 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. /// /// <param name="op">operator /// <param name="bil1">bilangan pertama /// <param name="bil2">bilangan kedua /// 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.
Menampilkan Bilangan 1 sampai 10 Dengan menggunakan tool test client maka dapat dilihat form berikut ini.
Gambar 3-1. Form akses GET api/Matematika. Dari form tersebut didapat beberapa informasi sebagai berikut : 1. 2.
HTTP verb yang digunakan adalah GET. Cara akses API ini dengan menggunakan url http://[nama_domain]/api/Matematika.
Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah ini.
Gambar 3-2. Output API GET api/Matematika. Informasi yang didapat dari respose yang diberikan adalah : 1.
Status : 200/OK. 1-31
2. 3.
Header yang berisikan informasi header dari output. Body yang berisikan output sesuai dengan output method dari class controller berikut. public IEnumerable Get() { return new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; }
Menampilkan Kata dari Angka yang Dimasukkan Gambar berikut ini menunjukkan form untuk mengakses API GET api/Matematika/{id}, dimana {id} adalah angka yang akan dimasukkan sebagai inputan.
Gambar 3-3. Form akses GET api/Matematika/{id} Dari form tersebut didapat beberapa informasi sebagai berikut : 1. 2.
HTTP verb yang digunakan adalah GET. Cara akses API ini dengan http://[nama_domain]/api/Matematika/{id}.
menggunakan
url
Masukkan nilai angka 1 sampai dengan 10 pada kolom input pada bagian URI parameters kemudian klik tombol Send dan akan dapat dilihat hasil seperti berikut ini :
Gambar 3-4. Output API GET api/Matematika{id} Informasi yang didapat dari respose yang diberikan adalah : 1.
Status : 200/OK. 1-32
2. 3.
Header yang berisikan informasi header dari output. 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; }
Melakukan Operasi Matematika Sederhana pada Dua Bilangan Pada gambar di bawah ini merupakan form untuk akses API yang berfungsi untuk melakukan operasi matematika sederhana pada dua bilangan.
1-33
Gambar 3-5. Form akses API GET api/Matematika?op={op}&bil1={bil1}&bil2={bil2} Informasi yang dapat dilihat berdasarkan gambar tersebut adalah : 1. 2. 3.
HTTP verb yang digunakan adalah GET. url akses API ini adalah http://[nama_domain]/api/Matematika?op=+&bil1=7&bil2=13 Pada bagian URI parameters tiga kolom inputan yang jumlahnya sesuai dengan jumlah parameter pada method ini yang terdapat pada class controller berikut. 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")) { 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}
API CRUD – LINQ to SQL Contoh ini akan memberikan penjelasan penggunaan Web API untuk proses create, retrieve, update dan delete (CRUD) pada database. Sebelumnya perlu dilakukan beberapa persiapan sebelum dilakukan pembuatan API CRUD ini, yaitu : 1. 2.
Pembuatan database dan tabel. Pembuatan class LINQ to SQL.
Pembuatan database dan tabel. Pada contoh ini terlebih dahulu dibuat database, sebagai contoh nama database yang akan digunakan adalah AkademikDB yang didalamnya terdapat sebuah tabel dengan nama Mahasiswa. Pada contoh ini digunakan SQL Server Express sehingga untuk membuat database yang dibutuhkan cukup dengan langkah membuat folder App_Data pada project. Kemudian klik kanan pada folder App_Data dan pilih Add > SQL Server Database.
Gambar 3-7. Menambahkan database pada project.
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.
Gambar 3-8. LINQ to SQL Classes – Akademik.dbml. 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 ContohWebAPI.Models; namespace ContohWebAPI.Controllers { public class MahasiswaController : ApiController { // GET api/ public IQueryable<Mahasiswa> GetMahasiswa() { AkademikDataContext db = new AkademikDataContext(); var data = db.Mahasiswas.Select(p => p); return data; } // GET api//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/ public void Post(int nim, string nama, string alamat, int umur, string jurusan) { AkademikDataContext db = new AkademikDataContext(); Mahasiswa item = new Mahasiswa(); item.NIM = nim; item.Nama = nama; item.Alamat = alamat; item.Umur = umur; item.Jurusan = jurusan; db.Mahasiswas.InsertOnSubmit(item); db.SubmitChanges(); } // PUT api//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//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(); Mahasiswa item = new Mahasiswa(); item.NIM = nim; item.Nama = nama; item.Alamat = alamat; item.Umur = umur; item.Jurusan = jurusan; 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.
Gambar 3-10. Form POST api/Mahasiswa. Dari pada gambar di bawah ini adalah respose dari aksi di atas.
Gambar 3-11. Response POST api/Mahasiswa. 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; }
Pada gambar di bawah ini diperlihatkan form GET api/Mahasiswa.
Gambar 3-13. Form GET api/Mahasiswa. 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.
Gambar 3-14. Response 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; }
Berikut ini adalah form GET api/Mahasiswa/nim.
Gambar 3-15. Form GET api/Mahasiswa/nim.
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.
Gambar 3-16. Response api/Mahasiswa/nim.
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. Dan berikut adalah response dari API ini.
Gambar 3-18. Response PUT api/Mahasiswa. Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa.
Gambar 3-19. Data telah diupdate.
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(); }
Berikut ini adalah form untuk menguji API DELETE api/Mahasiswa.
Gambar 3-20. Form DELETE api/Mahasiswa. Dan berikut adalah response dari API ini.
Gambar 3-21. Response DELETE api/Mahasiswa.
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(); Mahasiswa item = new Mahasiswa(); item.NIM = nim; item.Nama = nama; item.Alamat = alamat; item.Umur = umur; item.Jurusan = jurusan; db.Mahasiswas.InsertOnSubmit(item); db.SubmitChanges(); } // PUT api//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(); }
Pada method Post dan Put terdapat parameter-parameter berikut ini : 1. 2. 3. 4. 5.
nim. nama. alamat. umur. jurusan.
Jika suatu saat perlu dilakukan penambahan atribute pada tabel dan pada class data LINQ to SQL maka method di atas harus dilakukan sedkit perubahan. Untuk meminimalisasi perubahan pada kode di dalam class controller maka untuk kasus ini dapat dengan memanfaatkan atribute [FromBody]. Sehingga kode di atas akan diubah menjadi kode di bawah ini. // POST api/ public void Post([FromBody]Mahasiswa mhs) { AkademikDataContext db = new AkademikDataContext(); db.Mahasiswas.InsertOnSubmit(mhs); db.SubmitChanges();
1-45
} // PUT api//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.
Gambar 3-22. Form POST api/Mahasiswa. 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.
API CRUD – Entity Framework Pada contoh class controller MahasiswaController.cs di atas yaitu pada bagian API CRUD – LINQ to SQL terdapat perbedaan antara method-method kelompok HTTP verb GET dengan method-method kelompok lainnya (POST, PUT, DELETE). Perbedaan yang paling mendasar adalah method-method kelompok HTTP verb GET mengeluarkan output (return value) berupa string dengan format JSON sebagai data yang di-request. Sedangkan kelompok lainnya (POST, PUT, DELETE) adalah method tanpa mengeluarkan output (void). Perbedaan ini juga dapat dilihat dari response pada tool test client.
Gambar 3-24. Respose GET dan POST. Pada kedua gambar di atas dapat dilihat perbedaan yang terlihat pada bagian : 1. 2.
Status, response yang diberikan untuk API bertipe GET memiliki status 200/OK sedangkan untuk API bertipe POST memiliki nilai status 204/No Content. 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.
ADO.NET Entity Data Model Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu ditambahakan ADO.NET Entity Data Model pada project. Pertama adalah dengan klik kanan pada project kemudian pilih Add > Add New Item.
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.
Gambar 3-26. Entity Data Model Wizard – Generate from Database.
1-48
Gambar 3-27. Pembuatan connection string.
Gambar 3-28. Pemilihan versi Entity Framework.
1-49
Gambar 3-29. Pemilihan tabel.
Gambar 3-30. Antarmuka designer Akademik.edmx.
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. 2.
status, adalah atribut yang memberikan nilai success dan error dari API yang diakses. 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
[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
}
Gambar berikut adalah form akses POST api/Mahasiswa.
Gambar 3-31. Form POST api/Mahasiswa
Gambar 3-32. Response POST api/Mahasiswa 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
Berikut adalah form dan response dari API api/Mahasiswa untuk menampilkan seluruh data.
Gambar 3-33. Form API GET api/Mahasiswa.
1-56
Gambar 3-34. Response API GET api/Mahasiswa. Sedangkan berikut adalah form dan response dari API GET api/Mahasiswa?nim={nilai_nim}.
Gambar 3-35. Form API GET api/Mahasiswa?nim={nilai}
Gambar 3-36. Response api/Mahasiswa?nim={nilai}
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; }
Berikut ini adalah gambar form akses API ini.
Gambar 3-37. Form PUT api/Mahasiswa
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.
Gambar 3-40. Response DELETE api/Mahasiswa. Berikut ini adalah contoh response jika terjadi kesalahan, misal dimasukkan nilai NIM yang tidak terdapat dalam tabel Mahasiswa.
Gambar 3-41. Response DELETE api/Mahasiswa yang menampilkan kesalahan.
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. Klik tombol Install untuk menginstall.
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.
Gambar 4-3. Folder Reference – 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
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")); HttpResponseMessage response client.GetAsync("api/Matematika/"); if (response.IsSuccessStatusCode) {
Hasilnya terlihat seperti pada gambar di bawah ini.
Gambar 4-4. Hasil akses Web API dari aplikasi console. Pada baris kode di atas juga dapat dilihat baris berikut : client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
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
Maka hasilnya akan terlihat seperti pada gambar berikut ini.
Gambar 4-5. Output Web API dalam formal 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
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(); // Menampilkan data mahasiswa response = await client.GetAsync(serviceUrl); if (response.IsSuccessStatusCode) { var mhs response.Content.ReadAsAsync>().Result; foreach (Mahasiswa m in mhs) { System.Console.WriteLine(m.Nama); } } else { System.Console.WriteLine("{0} (int)response.StatusCode, response.ReasonPhrase); }
=
({1})",
System.Console.WriteLine(); // Hapus data mahasiswa response = client.DeleteAsync(serviceUrl+"?nim=23").Result; if (response.IsSuccessStatusCode) { System.Console.WriteLine("Data mahasiswa berhasil dihapus."); } else { System.Console.WriteLine("{0} (int)response.StatusCode, response.ReasonPhrase); }
({1})",
System.Console.WriteLine(); // Menampilkan data mahasiswa response = await client.GetAsync(serviceUrl); if (response.IsSuccessStatusCode) { var mhs response.Content.ReadAsAsync>().Result; foreach (Mahasiswa m in mhs) { System.Console.WriteLine(m.Nama); } } else
public class Mahasiswa { public string NIM { set; get; } public string Nama { set; get; } public int Umur { set; get; } public string Alamat { set; get; } public string Jurusan { set; get; } } }
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. 2. 3. 4.
ReadAsAsync, method ini berfungsi untuk mengakses API GET. PostAsJsonAsync, method ini berfungsi untuk mengakses API POST. PutAsJsonAsync, method ini berfungsi untuk mengakses API PUT. 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"; HttpResponseMessage mahasiswa).Result;
response
=
client.PostAsJsonAsync(serviceUrl,
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>().Result; foreach (Mahasiswa m in mhs) { System.Console.WriteLine(m.Nama); } } else
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"; response = client.PutAsJsonAsync(serviceUrl+"?nim=23", mahasiswa).Result;
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.
Menampilkan Data Mahasiswa Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView. AksesAPIMahasiswaHttpClient.aspx
public partial class AksesAPIMahasiswaHttpClient : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { GetDataMahasiswa(); } protected void GetDataMahasiswa() { HttpClient client = new HttpClient(); client.BaseAddress = new Uri("http://localhost:8492/"); client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json")); HttpResponseMessage response = client.GetAsync("api/Mahasiswa").Result; if (response.IsSuccessStatusCode) { var data = response.Content.ReadAsAsync>().Result; GridView_Main.DataSource = data; GridView_Main.DataBind(); } else { Label_Message.Text = "Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase; } } } public class Mahasiswa { public string NIM { set; get; } public string Nama { set; get; } public int Umur { set; get; } public string Alamat { set; get; } public string Jurusan { set; get; } }
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.
Gambar 4-6. Gridview Data Mahasiswa.
Tambah Data Mahasiswa Berikut ini adalah contoh aplikasi web untuk input data mahasiswa. Dengan memanfaatkan kode program di atas, yang perlu ditambahkan adalah form input data mahasiswa berikut ini. NIM : Nama : Umur : Alamat : Jurusan :
Dan ketika tombol Button_Simpan maka akan dipanggil method Button_Simpan_Click yang berisi kode berikut ini. protected void Button_Simpan_Click(object sender, EventArgs e) { HttpClient client = new HttpClient(); client.BaseAddress = new Uri("http://localhost:8492/"); client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json")); Mahasiswa mhs = new Mahasiswa(); mhs.NIM = TextBox_NIM.Text; mhs.Nama = TextBox_Nama.Text; mhs.Umur = Convert.ToInt32(TextBox_Umur.Text); mhs.Alamat = TextBox_Alamat.Text; mhs.Jurusan = TextBox_Jurusan.Text; 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;
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.
Gambar 4-7. Form input data mahasiswa.
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.
Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut. protected void GridView_Main_SelectedIndexChanged(object sender, EventArgs e) { string id = Convert.ToString(GridView_Main.SelectedValue); HttpClient client = new HttpClient(); client.BaseAddress = new Uri("http://localhost:8492/"); client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
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.
Gambar 4-8. GridView dengan link untuk memilih record.
Update Data Mahasiswa Selanjutnya adalah menambahkan fitur untuk update data mahasiswa. Pada halaman sebelumnya akan ditambahkan tombol Button_Update yang akan memanggil method Button_Update_Click.
Dan berikut adalah isi dari method Button_Update_Click. protected void Button_Update_Click(object sender, EventArgs e) {
Menghapus Data Mahasiswa Untuk menghapus data mahasiswa maka perlu ditambahkan link yang dapat dipilih untuk menghapus record mahasiswa yang diinginkan. Seperti yang dapat dilihat pada gambar di bawah ini.
Gambar 4-9. Menghapus record mahasiswa.
1-74
Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control 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(); HttpClient client = new HttpClient(); client.BaseAddress = new Uri("http://localhost:8492/"); client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json")); HttpResponseMessage response = client.DeleteAsync("api/Mahasiswa?nim=" + id).Result; if (response.IsSuccessStatusCode) { GetDataMahasiswa(); } else { Label_Message.Text = "Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase; } }
Mahasiswa.WP Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8. Seperti contohcontoh sebelumnya, pada contoh program ini juga akan menggunakan library Microsoft.AspNet.WebApi.Client. Oleh karena pada project ini perlu ditambahkan library tersebut via Manage NuGet Packages.
1-75
Gambar 4-10. Manage NuGet Packages untuk project Windows Phone 8. Setelah proses download selesai maka akan dilakukan proses installasi seperti berikut.
Gambar 4-11. Instalasi library Microsoft.AspNet.WebApi.Client pada project Windows Phone 8.
Project Windows Phone App Pada contoh ini akan digunakan template project windows phone yang sederhana yaitu Windows Phone App seperti yang terlihat pada gambar.
1-76
Gambar 4-12. Project Windows Phone App. Setelah memberi nama project dengan nama Mahasiswa.WP kemudian klik OK. Pada contoh ini tidak akan digunakan file MainPage.xaml sebagai file utama, tetapi akan digunakan file MahasiswaPage.xaml. Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPage.xaml dapat diakses sebagai file default saat aplikasi Windows Phone dijalankan. Langkah pertama adalah membuat file MahasiswaPage.xaml dengan cara klik kanan pada project Mahasiswa.WP, kemudian piliha Add > New Item. Pada window Add New Item pilih Windows Phone Potrait Page kemudian beri nama MahasiswaPage.xaml.
Gambar 4-13. MahasiswaPage.xaml
1-77
Langkah selanjutnya adalah mengedit file WPAppManifest.xml yang ada pada folder Propertis pada project. Caranya cukup dengan mengklik double file tersebut maka akan akan ditampilkan seperti gambar berikut ini.
Gambar 4-14. WMAppManifest.xml. Pada kolom input Navigation Page ganti nama MainPage.xaml dengan MahasiswaPage.xaml.
Menampilkan Data Mahasiswa Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPage.xaml maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contohcontoh sebelumnya. Berikut adalah isi dari kode MahasiswaPage.xaml dan MahasiswaPage.xaml.cs. MahasiswaPage.xaml
Selain kedua kode di atas juga dibuat class MahasiswaModel.cs untuk objek yang akan digunakan pada collection yang nantinya akan digunakan untuk menampung data sebelum ditampilkan pada control di antarmuka XAML. Sebagai contoh di atas digunakan control LongListSelector untuk menampilkan data mahasiswa. Berikut ini adalah isi dari file MahasiswaModel.cs tersebut. MahasiswaModel.cs
namespace Mahasiswa.WP.ViewModels { public class MahasiswaModel { public string NIM { set; get; } public string Nama { set; get; } public int Umur { set; get; } public string Alamat { set; get; } public string Jurusan { set; get; } } }
Berikut adalah tampilan dari halaman ini.
Gambar 4-15. MahasiswaPage.xaml
1-81
Memilih dan Update Data Mahasiswa Dari halaman MahasiswaPage.xaml yang telah dibuat diatas, jika salah satu item dipilih maka akan diarahkan ke halaman MahasiswaDetailPage.xaml seperti pada gambar berikut.
Gambar 4-16. MahasiswaDetailPage.xaml. Pada halaman ini terdapat fitur untuk mengupdate data yang ditampilkan pada form dan juga fitur untuk menghapus data. Cara untuk melakukan hal tersebut dapat dilihat dari kode di bawah ini. MahasiswaDetailPage.xaml
Tambah Data Mahasiswa Pada halaman MahasiswaPage.xaml terdapat tombol untuk menambah data mahasiswa, yang akan mengantarkan ke halaman MahasiswaAddPage.xaml. Pada halaman tersebut akan ditampilkan form untuk tambah data baru. Berikut adalah isi dari file MahasiswaAddPage.xaml dan MahasiswaAddPage.xaml.cs. MahasiswaAddPage.xaml
Dan berikut ini adalah tampilan dari halaman ini. 1-87
Gambar 4-17. MahasiswaAddPage.xaml.
1-88
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. 2. 3. 4.
Template project Web API. Cara akses Web API. Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk menguji API. 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. 2. 3.
Authentifikasi. Keamanan (security). Dan lain-lain.
Kritik dan saran dapat ditujukan langsung via email ke reza.faisal [at] gmail [dot] com.
