Seri Belajar ASP.NET : Pengenalan ASP.NET Web API (PDF

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
Rangkuman ................................................................................................... 2-28
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
4 Pemrograman Akses Web API ............................................................. 4-61
Matematika.Console .................................................................................... 4-61
Mahasiswa.Console ..................................................................................... 4-65
Create .................................................................................................................... 4-68
Retrieve ................................................................................................................. 4-68
Update .................................................................................................................. 4-69
Delete .................................................................................................................... 4-69
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
5 Penutup.................................................................................................... 5-89
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
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
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Http;
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
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
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
using
using
using
using
using
using
using
ASPNET.MVC.WebApp.App_Start;
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Http;
System.Web.Mvc;
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);
}
}
}
Dan berikut adalah isi dari kedua file yang lain.
WebApiConfig.cs
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Http;
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 }
);
1-13
}
}
}
ValuesController.cs
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
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)
{
}
}
}
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.
Menambahkan folder App_Code.
Menambahkan file WebApiConfig.cs pada folder App_Code.
Menambahkan file Global.asax.
1-14
Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfig.cs ke dalam
file Global.asax.
Menambahkan class Web API Controller pada folder App_Code.
4.
5.
Berikut ini adalah isi dari ketiga file tersebut.
WebApiConfig.cs
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
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">
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.
}
</script>
ValuesController.cs
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
System.Web.Http;
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)
{
}
}
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
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
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.
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
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
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.
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
@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.
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
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
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.
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<int> 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
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
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();
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/<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();
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/<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();
}
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/<controller>
public void Post([FromBody]Mahasiswa mhs)
{
AkademikDataContext db = new AkademikDataContext();
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.
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
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Net.Http;
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
}
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
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.
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
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net.Http;
System.Net.Http.Headers;
System.Text;
System.Threading.Tasks;
namespace Matematika.Console
{
class Program
{
static void Main(string[] args)
{
RunAsync().Wait();
System.Console.ReadKey();
}
static async Task RunAsync()
{
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)
{
=
await
System.Console.WriteLine(response.Content.ReadAsStringAsync().Result);
}
else
{
System.Console.WriteLine(response.StatusCode);
}
System.Console.WriteLine();
response = await client.GetAsync("api/Matematika/3");
if (response.IsSuccessStatusCode)
{
System.Console.WriteLine(response.Content.ReadAsStringAsync().Result);
}
else
{
System.Console.WriteLine(response.StatusCode);
}
System.Console.WriteLine();
response
=
client.GetAsync("api/Matematika?op=tambah&bil1=13&bil2=23");
if (response.IsSuccessStatusCode)
{
await
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"));
HttpResponseMessage
response
client.GetAsync("api/Matematika/");
if (response.IsSuccessStatusCode)
{
=
await
System.Console.WriteLine(response.Content.ReadAsStringAsync().Result);
}
else
{
System.Console.WriteLine(response.StatusCode);
}
...
}
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
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/xml"));
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
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net.Http;
System.Net.Http.Headers;
System.Text;
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"));
// 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
response
client.PostAsJsonAsync(serviceUrl, mahasiswa).Result;
if (response.IsSuccessStatusCode)
{
System.Console.WriteLine("Data
mahasiswa
disimpan.");
}
else
{
System.Console.WriteLine("{0}
(int)response.StatusCode, response.ReasonPhrase);
}
=
berhasil
({1})",
System.Console.WriteLine();
// Menampilkan data mahasiswa
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
{
System.Console.WriteLine("{0}
(int)response.StatusCode, response.ReasonPhrase);
}
=
({1})",
System.Console.WriteLine();
// Update data mahasiswa
mahasiswa = new Mahasiswa();
mahasiswa.NIM = "24";
mahasiswa.Nama = "Nama 24";
mahasiswa.Umur = 24;
mahasiswa.Alamat = "Alamat 24";
mahasiswa.Jurusan = "Ilkom";
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();
// Menampilkan data mahasiswa
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
{
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<IEnumerable<Mahasiswa>>().Result;
foreach (Mahasiswa m in mhs)
{
System.Console.WriteLine(m.Nama);
}
}
else
=
1-67
{
System.Console.WriteLine("{0}
(int)response.StatusCode, response.ReasonPhrase);
}
}
}
}
({1})",
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<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";
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
<%@
Page
Language="C#"
CodeFile="AksesAPIMahasiswaHttpClient.aspx.cs"
Inherits="AksesAPIMahasiswaHttpClient" %>
AutoEventWireup="true"
<!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>
Dan berikut adalah behind code dari file di atas.
AksesAPIMahasiswaHttpClient.aspx.cs
using
using
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net.Http;
System.Net.Http.Headers;
System.Threading.Tasks;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;
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<IEnumerable<Mahasiswa>>().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.
<asp:Label ID="Label_Message" runat="server" Text=""></asp:Label><br />
NIM : <asp:TextBox ID="TextBox_NIM" runat="server"></asp:TextBox><br />
Nama : <asp:TextBox ID="TextBox_Nama" runat="server"></asp:TextBox><br />
Umur : <asp:TextBox ID="TextBox_Umur" runat="server"></asp:TextBox><br />
Alamat : <asp:TextBox ID="TextBox_Alamat" runat="server"></asp:TextBox><br />
Jurusan : <asp:TextBox ID="TextBox_Jurusan" runat="server"></asp:TextBox><br />
<asp:Button ID="Button_Simpan" OnClick="Button_Simpan_Click" runat="server"
Text="Simpan" />
<hr />
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;
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.
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.
<asp:GridView ID="GridView_Main"
OnSelectedIndexChanged="GridView_Main_SelectedIndexChanged"
DataKeyNames="NIM" runat="server">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
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"));
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.
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.
<asp:Button ID="Button_Update" OnClick="Button_Update_Click" Visible="false"
runat="server" Text="Update" />
Dan berikut adalah isi dari method Button_Update_Click.
protected void Button_Update_Click(object sender, EventArgs e)
{
1-73
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"));
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.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;
}
}
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.
<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();
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
<phone:PhoneApplicationPage
x:Class="Mahasiswa.WP.MahasiswaPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clrnamespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
1-78
<shell:ApplicationBarIconButton
x:Name="ApplicationBarIconButton_Add"
Click="ApplicationBarIconButton_Add_Click" IconUri="/Assets/AppBar/add.png"
Text="tambah"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="CONTOH WEB API" Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock Text="mahasiswa" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="LongListSelector_MainData"
SelectionChanged="LongListSelector_MainData_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding Nama}"
TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding NIM}"
TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource
PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Alamat}"
TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource
PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Jurusan}"
TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource
PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
MahasiswaPage.xaml.cs
using
using
using
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Windows;
System.Windows.Controls;
System.Windows.Navigation;
Microsoft.Phone.Controls;
Microsoft.Phone.Shell;
System.Net.Http;
1-79
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Mahasiswa.WP.ViewModels;
namespace Mahasiswa.WP
{
public partial class MahasiswaPage : PhoneApplicationPage
{
public MahasiswaPage()
{
InitializeComponent();
LongListSelector_MainData_DataBind();
}
public async Task LongListSelector_MainData_DataBind()
{
try
{
HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage
response
=
client.GetAsync("http://169.254.80.80/akademik/api/Mahasiswa");
response.EnsureSuccessStatusCode();
await
if (response.IsSuccessStatusCode)
{
var
mhs
=
response.Content.ReadAsAsync<IEnumerable<MahasiswaModel>>().Result.ToList();
LongListSelector_MainData.ItemsSource = mhs;
}
else
{
MessageBox.Show("Gagal");
}
}
catch(Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private
void
ApplicationBarIconButton_Add_Click(object
sender,
EventArgs e)
{
NavigationService.Navigate(new
Uri("/MahasiswaAddPage.xaml",
UriKind.Relative));
}
private
void
LongListSelector_MainData_SelectionChanged(object
sender, SelectionChangedEventArgs e)
{
if (LongListSelector_MainData.SelectedItem == null)
{
return;
}
PhoneApplicationService.Current.State["objMahasiswa"]
=
LongListSelector_MainData.SelectedItem;
NavigationService.Navigate(new Uri("/MahasiswaDetailPage.xaml",
UriKind.Relative));
1-80
LongListSelector_MainData.SelectedItem = null;
}
}
}
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
<phone:PhoneApplicationPage
x:Class="Mahasiswa.WP.MahasiswaDetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clrnamespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
1-82
<shell:ApplicationBarIconButton
x:Name="ApplicationBarIconButton_Delete"
Click="ApplicationBarIconButton_Delete_Click"
IconUri="/Assets/AppBar/delete.png" Text="hapus"/>
<shell:ApplicationBarIconButton
x:Name="ApplicationBarIconButton_Update"
Click="ApplicationBarIconButton_Update_Click"
IconUri="/Assets/AppBar/edit.png" Text="update"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock
Text="CONTOH
WEB
API"
Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock x:Name="TextBlock_Title" Text="page name" Margin="9,7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="nama" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Nama" />
<TextBlock Text="umur" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Umur" />
<TextBlock Text="alamat" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Alamat" />
<TextBlock Text="jurusan" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Jurusan" />
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
MahasiswaDetailPage.xaml.cs
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Windows;
System.Windows.Controls;
System.Windows.Navigation;
Microsoft.Phone.Controls;
Microsoft.Phone.Shell;
System.Threading.Tasks;
System.Net.Http;
System.Net.Http.Headers;
Mahasiswa.WP.ViewModels;
namespace Mahasiswa.WP
{
1-83
public partial class MahasiswaDetailPage : PhoneApplicationPage
{
public MahasiswaDetailPage()
{
InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
try
{
MahasiswaModel
item
(MahasiswaModel)PhoneApplicationService.Current.State["objMahasiswa"];
=
TextBlock_Title.Text = item.NIM + " - " + item.Nama;
TextBox_Nama.Text = item.Nama;
TextBox_Umur.Text = Convert.ToString(item.Umur);
TextBox_Alamat.Text = item.Alamat;
TextBox_Jurusan.Text = item.Jurusan;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
public async Task UpdateMahasiswa()
{
try
{
MahasiswaModel
item
(MahasiswaModel)PhoneApplicationService.Current.State["objMahasiswa"];
=
MahasiswaModel mahasiswa = new MahasiswaModel();
mahasiswa.Nama = TextBox_Nama.Text;
mahasiswa.Alamat = TextBox_Alamat.Text;
mahasiswa.Jurusan = TextBox_Jurusan.Text;
mahasiswa.Umur = Convert.ToInt32(TextBox_Umur.Text);
HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage
response
=
await
client.PutAsJsonAsync("http://169.254.80.80/akademik/api/Mahasiswa?nim="
+
item.NIM, mahasiswa);
response.EnsureSuccessStatusCode();
if (response.IsSuccessStatusCode)
{
MessageBox.Show("Data berhasil diupdate.");
}
else
{
MessageBox.Show("Data gagal diupdate.");
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
1-84
}
public async Task DeleteMahasiswa()
{
try
{
MahasiswaModel
item
(MahasiswaModel)PhoneApplicationService.Current.State["objMahasiswa"];
HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage
response
=
client.DeleteAsync("http://169.254.80.80/akademik/api/Mahasiswa?nim="
item.NIM);
response.EnsureSuccessStatusCode();
=
await
+
if (response.IsSuccessStatusCode)
{
MessageBox.Show("Data berhasil dihapus.");
}
else
{
MessageBox.Show("Data gagal dihapus.");
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private void ApplicationBarIconButton_Delete_Click(object
EventArgs e)
{
DeleteMahasiswa();
}
sender,
private void ApplicationBarIconButton_Update_Click(object
EventArgs e)
{
UpdateMahasiswa();
}
}
}
sender,
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
<phone:PhoneApplicationPage
x:Class="Mahasiswa.WP.MahasiswaAddPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
1-85
xmlns:shell="clrnamespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton
x:Name="ApplicationBarIconButton_Add"
Click="ApplicationBarIconButton_Add_Click" IconUri="/Assets/AppBar/save.png"
Text="simpan"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock
Text="CONTOH
WEB
API"
Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock
Text="tambah
data"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="nim" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_NIM" />
<TextBlock Text="nama" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Nama" />
<TextBlock Text="umur" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Umur" />
<TextBlock Text="alamat" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Alamat" />
<TextBlock Text="jurusan" FontSize="27" Margin="13,0,0,0" />
<TextBox x:Name="TextBox_Jurusan" />
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
MahasiswaAddPage.xaml.cs
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Net;
System.Windows;
System.Windows.Controls;
1-86
using
using
using
using
using
using
using
System.Windows.Navigation;
Microsoft.Phone.Controls;
Microsoft.Phone.Shell;
Mahasiswa.WP.ViewModels;
System.Threading.Tasks;
System.Net.Http;
System.Net.Http.Headers;
namespace Mahasiswa.WP
{
public partial class MahasiswaAddPage : PhoneApplicationPage
{
public MahasiswaAddPage()
{
InitializeComponent();
}
public async Task InsertMahasiswa()
{
try
{
MahasiswaModel mahasiswa = new MahasiswaModel();
mahasiswa.Nama = TextBox_Nama.Text;
mahasiswa.Alamat = TextBox_Alamat.Text;
mahasiswa.Jurusan = TextBox_Jurusan.Text;
mahasiswa.Umur = Convert.ToInt32(TextBox_Umur.Text);
HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage
response
=
client.PostAsJsonAsync("http://169.254.80.80/akademik/api/Mahasiswa",
mahasiswa);
response.EnsureSuccessStatusCode();
await
if (response.IsSuccessStatusCode)
{
MessageBox.Show("Data berhasil disimpan.");
}
else
{
MessageBox.Show("Data gagal disimpan.");
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private
void
ApplicationBarIconButton_Add_Click(object
EventArgs e)
{
InsertMahasiswa();
}
}
}
sender,
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.
1-89
1-90
1-91