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

98 Pages·2014·2.94 MB·Indonesian

by  M Reza Faisal

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
Web Browser
Internet
pada komputer
Database Web Server
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 Aplikasi
Service Mobile
Internet
Database Web Server
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 status-
status yang ditulis. Pada proses login akan dilakukan pengecekan username dan password
yang dimasukkan untuk dicocokkan dengan data yang ada di database. Begitu juga jika pada
halaman ingin ditampilkan daftar status yang telah di tulis pada wall, maka perlu ada proses
untuk mengambil data tersebut pada database. Tetapi jika dilihat pada gambar di atas, proses
pengambilan data tersebut tentunya tidak bisa dilakukan langsung dari aplikasi mobile ke
database server. Pada gambar terdapat layanan berbasis web (web service) yang berada pada
web server, pada layanan tersebut terdapat fungsi-fungsi yang bertugas untuk melakukan
hal-hal penting termasuk fungsi untuk mengakses data pada database server atau fungsi
untuk otentikasi user untuk proses login. Maka aplikasi mobile cukup mengakses fungsi-
fungsi pada layanan tersebut untuk melakukan proses-proses tersebut.
Keberadaan web service sebagai perantara seperti gambar di atas mempunyai beberapa
manfaat, diantaranya adalah :
1. Layanan ini dapat lebih mengamankan data pada database server, hal ini dikarena
database tidak langsung diakses oleh aplikasi.
2. Layanan ini bukan hanya dapat diakses oleh aplikasi mobile, tapi juga dapat diakses
oleh aplikasi jenis lain seperti aplikasi web atau aplikasi desktop. Selain itu layanan
berbasis web ini akan dapat diakses dan dimanfaatkan pada berbagai platform atau
1-2
teknologi, artinya layanan ini bisa diakses oleh aplikasi yang dibangun dengan .NET,
Java, PHP, Python, Ruby, Javascript dan lain-lain.
Dari paparan di atas maka dapat digambarkan peran dari web service seperti gambar berikut
ini.
Web Aplikasi Mobile
Service
Internet
Database Web Server
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