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

98

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

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

I

Kata Pengantar

Puji dan syukur diucapkan kepada Allah SWT atas selesainya ebook sederhana yang berjudul

Pengenalan ASPNET Web API

Pada ebook ini akan dikenalkan tentang ASPNET 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

(rezafaisal [at] gmail [dot] com)

II

Daftar Isi

Kata Pengantar I

Daftar Isi II

Daftar Gambar IV

1 Pendahuluan 1-1

Web Service 1-1

ASPNET amp 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

ASPNET Web Form Web Application 2-11

ASPNET MVC Web Application 2-13

ASPNET Web Form Website 2-14

Halaman Bantuan ASPNET Web API 2-16

HTTP Verb 2-19

Mengakses Web API 2-21

A Simple Test Client for ASPNET 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 ndash LINQ to SQL 3-35

Create 3-38

Retrieve 3-40

Update 3-42

Delete 3-44

Penggunaan Atribute [FromBody] 3-45

API CRUD ndash Entity Framework 3-47

ADONET Entity Data Model 3-48

III

Class OutputModelcs 3-50

Class MahasiswaControllercs 3-51

Create 3-54

Retrieve 3-55

Update 3-58

Delete 3-59

4 Pemrograman Akses Web API 4-61

MatematikaConsole 4-61

MahasiswaConsole 4-65

Create 4-68

Retrieve 4-68

Update 4-69

Delete 4-69

MahasiswaWebsite 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

MahasiswaWP 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

IV

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 ASPNET 1-3

Gambar 2-1 Window Add New Project 2-5

Gambar 2-2 Window New ASPNET 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 ndash MicrosoftAspNetWebApiClient 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 ndash Get apiValues 2-24

Gambar 2-15 Form Test Client ndash response for Get apiValue 2-25

Gambar 2-16 Form Test Client ndash Post apiValues 2-25

Gambar 2-17 Form Test Client ndash response for POST apiValues 2-26

Gambar 2-18 Form Test Client ndash PUT apiValues 2-26

Gambar 2-19 Form Test Client ndash response for PUT apiValues 2-27

Gambar 2-20 Form Test Client ndash Delete apiValues 2-27

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues 2-28

Gambar 3-1 Form akses GET apiMatematika 3-31

Gambar 3-2 Output API GET apiMatematika 3-31

Gambar 3-3 Form akses GET apiMatematikaid 3-32

Gambar 3-4 Output API GET apiMatematikaid 3-32

Gambar 3-5 Form akses API GET apiMatematikaop=opampbil1=bil1ampbil2=bil2 3-34

Gambar 3-6 Response dari API GET apiMatematika op=opampbil1=bil1ampbil2=bil2 3-35

Gambar 3-7 Menambahkan database pada project 3-35

V

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml 3-36

Gambar 3-9 Data class Mahasiswa 3-37

Gambar 3-10 Form POST apiMahasiswa 3-39

Gambar 3-11 Response POST apiMahasiswa 3-39

Gambar 3-12 Hasil proses create data 3-40

Gambar 3-13 Form GET apiMahasiswa 3-40

Gambar 3-14 Response GET apiMahasiswa 3-41

Gambar 3-15 Form GET apiMahasiswanim 3-41

Gambar 3-16 Response apiMahasiswanim 3-42

Gambar 3-17 Form PUT apiMahasiswa 3-43

Gambar 3-18 Response PUT apiMahasiswa 3-43

Gambar 3-19 Data telah diupdate 3-43

Gambar 3-20 Form DELETE apiMahasiswa 3-44

Gambar 3-21 Response DELETE apiMahasiswa 3-44

Gambar 3-22 Form POST apiMahasiswa 3-46

Gambar 3-23 Form PUT apiMahasiswa 3-47

Gambar 3-24 Respose GET dan POST 3-47

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model - Akademikedmx 3-48

Gambar 3-26 Entity Data Model Wizard ndash 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 Akademikedmx 3-50

Gambar 3-31 Form POST apiMahasiswa 3-55

Gambar 3-32 Response POST apiMahasiswa 3-55

Gambar 3-33 Form API GET apiMahasiswa 3-56

Gambar 3-34 Response API GET apiMahasiswa 3-57

Gambar 3-35 Form API GET apiMahasiswanim=nilai 3-57

Gambar 3-36 Response apiMahasiswanim=nilai 3-57

Gambar 3-37 Form PUT apiMahasiswa 3-58

Gambar 3-38 Response PUT apiMahasiswa 3-59

Gambar 3-39 Form DELETE apiMahasiswa 3-60

Gambar 3-40 Response DELETE apiMahasiswa 3-60

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan 3-60

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client Library 4-61

VI

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library 4-62

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating 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 MicrosoftAspNetWebApiClient pada project Windows

Phone 8 4-76

Gambar 4-12 Project Windows Phone App 4-77

Gambar 4-13 MahasiswaPagexaml 4-77

Gambar 4-14 WMAppManifestxml 4-78

Gambar 4-15 MahasiswaPagexaml 4-81

Gambar 4-16 MahasiswaDetailPagexaml 4-82

Gambar 4-17 MahasiswaAddPagexaml 4-88

1-1

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

(wwwyoutubecom) atau aplikasi web jejaring sosial seperti facebook (wwwfacebookcom)

atau twitter (wwwtwittercom) Tetapi dalam perkembangannya sekarang ini sudah sangat

umum perangkat smartphone pad atau tab sehingga tidak heran jika aplikasi web

mempunyai ldquopendampingrdquo dalam kehidupannya ldquoPendampingrdquo ini sering disebut dengan

aplikasi mobile Kenapa disebut ldquopendampingrdquo alih-alih sebagai ldquopesaingrdquo 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

Web ServerDatabase Server

Web Browserpada komputer

Internet

Aplikasi Web

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-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

II

Daftar Isi

Kata Pengantar I

Daftar Isi II

Daftar Gambar IV

1 Pendahuluan 1-1

Web Service 1-1

ASPNET amp 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

ASPNET Web Form Web Application 2-11

ASPNET MVC Web Application 2-13

ASPNET Web Form Website 2-14

Halaman Bantuan ASPNET Web API 2-16

HTTP Verb 2-19

Mengakses Web API 2-21

A Simple Test Client for ASPNET 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 ndash LINQ to SQL 3-35

Create 3-38

Retrieve 3-40

Update 3-42

Delete 3-44

Penggunaan Atribute [FromBody] 3-45

API CRUD ndash Entity Framework 3-47

ADONET Entity Data Model 3-48

III

Class OutputModelcs 3-50

Class MahasiswaControllercs 3-51

Create 3-54

Retrieve 3-55

Update 3-58

Delete 3-59

4 Pemrograman Akses Web API 4-61

MatematikaConsole 4-61

MahasiswaConsole 4-65

Create 4-68

Retrieve 4-68

Update 4-69

Delete 4-69

MahasiswaWebsite 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

MahasiswaWP 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

IV

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 ASPNET 1-3

Gambar 2-1 Window Add New Project 2-5

Gambar 2-2 Window New ASPNET 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 ndash MicrosoftAspNetWebApiClient 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 ndash Get apiValues 2-24

Gambar 2-15 Form Test Client ndash response for Get apiValue 2-25

Gambar 2-16 Form Test Client ndash Post apiValues 2-25

Gambar 2-17 Form Test Client ndash response for POST apiValues 2-26

Gambar 2-18 Form Test Client ndash PUT apiValues 2-26

Gambar 2-19 Form Test Client ndash response for PUT apiValues 2-27

Gambar 2-20 Form Test Client ndash Delete apiValues 2-27

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues 2-28

Gambar 3-1 Form akses GET apiMatematika 3-31

Gambar 3-2 Output API GET apiMatematika 3-31

Gambar 3-3 Form akses GET apiMatematikaid 3-32

Gambar 3-4 Output API GET apiMatematikaid 3-32

Gambar 3-5 Form akses API GET apiMatematikaop=opampbil1=bil1ampbil2=bil2 3-34

Gambar 3-6 Response dari API GET apiMatematika op=opampbil1=bil1ampbil2=bil2 3-35

Gambar 3-7 Menambahkan database pada project 3-35

V

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml 3-36

Gambar 3-9 Data class Mahasiswa 3-37

Gambar 3-10 Form POST apiMahasiswa 3-39

Gambar 3-11 Response POST apiMahasiswa 3-39

Gambar 3-12 Hasil proses create data 3-40

Gambar 3-13 Form GET apiMahasiswa 3-40

Gambar 3-14 Response GET apiMahasiswa 3-41

Gambar 3-15 Form GET apiMahasiswanim 3-41

Gambar 3-16 Response apiMahasiswanim 3-42

Gambar 3-17 Form PUT apiMahasiswa 3-43

Gambar 3-18 Response PUT apiMahasiswa 3-43

Gambar 3-19 Data telah diupdate 3-43

Gambar 3-20 Form DELETE apiMahasiswa 3-44

Gambar 3-21 Response DELETE apiMahasiswa 3-44

Gambar 3-22 Form POST apiMahasiswa 3-46

Gambar 3-23 Form PUT apiMahasiswa 3-47

Gambar 3-24 Respose GET dan POST 3-47

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model - Akademikedmx 3-48

Gambar 3-26 Entity Data Model Wizard ndash 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 Akademikedmx 3-50

Gambar 3-31 Form POST apiMahasiswa 3-55

Gambar 3-32 Response POST apiMahasiswa 3-55

Gambar 3-33 Form API GET apiMahasiswa 3-56

Gambar 3-34 Response API GET apiMahasiswa 3-57

Gambar 3-35 Form API GET apiMahasiswanim=nilai 3-57

Gambar 3-36 Response apiMahasiswanim=nilai 3-57

Gambar 3-37 Form PUT apiMahasiswa 3-58

Gambar 3-38 Response PUT apiMahasiswa 3-59

Gambar 3-39 Form DELETE apiMahasiswa 3-60

Gambar 3-40 Response DELETE apiMahasiswa 3-60

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan 3-60

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client Library 4-61

VI

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library 4-62

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating 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 MicrosoftAspNetWebApiClient pada project Windows

Phone 8 4-76

Gambar 4-12 Project Windows Phone App 4-77

Gambar 4-13 MahasiswaPagexaml 4-77

Gambar 4-14 WMAppManifestxml 4-78

Gambar 4-15 MahasiswaPagexaml 4-81

Gambar 4-16 MahasiswaDetailPagexaml 4-82

Gambar 4-17 MahasiswaAddPagexaml 4-88

1-1

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

(wwwyoutubecom) atau aplikasi web jejaring sosial seperti facebook (wwwfacebookcom)

atau twitter (wwwtwittercom) Tetapi dalam perkembangannya sekarang ini sudah sangat

umum perangkat smartphone pad atau tab sehingga tidak heran jika aplikasi web

mempunyai ldquopendampingrdquo dalam kehidupannya ldquoPendampingrdquo ini sering disebut dengan

aplikasi mobile Kenapa disebut ldquopendampingrdquo alih-alih sebagai ldquopesaingrdquo 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

Web ServerDatabase Server

Web Browserpada komputer

Internet

Aplikasi Web

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-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

III

Class OutputModelcs 3-50

Class MahasiswaControllercs 3-51

Create 3-54

Retrieve 3-55

Update 3-58

Delete 3-59

4 Pemrograman Akses Web API 4-61

MatematikaConsole 4-61

MahasiswaConsole 4-65

Create 4-68

Retrieve 4-68

Update 4-69

Delete 4-69

MahasiswaWebsite 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

MahasiswaWP 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

IV

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 ASPNET 1-3

Gambar 2-1 Window Add New Project 2-5

Gambar 2-2 Window New ASPNET 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 ndash MicrosoftAspNetWebApiClient 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 ndash Get apiValues 2-24

Gambar 2-15 Form Test Client ndash response for Get apiValue 2-25

Gambar 2-16 Form Test Client ndash Post apiValues 2-25

Gambar 2-17 Form Test Client ndash response for POST apiValues 2-26

Gambar 2-18 Form Test Client ndash PUT apiValues 2-26

Gambar 2-19 Form Test Client ndash response for PUT apiValues 2-27

Gambar 2-20 Form Test Client ndash Delete apiValues 2-27

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues 2-28

Gambar 3-1 Form akses GET apiMatematika 3-31

Gambar 3-2 Output API GET apiMatematika 3-31

Gambar 3-3 Form akses GET apiMatematikaid 3-32

Gambar 3-4 Output API GET apiMatematikaid 3-32

Gambar 3-5 Form akses API GET apiMatematikaop=opampbil1=bil1ampbil2=bil2 3-34

Gambar 3-6 Response dari API GET apiMatematika op=opampbil1=bil1ampbil2=bil2 3-35

Gambar 3-7 Menambahkan database pada project 3-35

V

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml 3-36

Gambar 3-9 Data class Mahasiswa 3-37

Gambar 3-10 Form POST apiMahasiswa 3-39

Gambar 3-11 Response POST apiMahasiswa 3-39

Gambar 3-12 Hasil proses create data 3-40

Gambar 3-13 Form GET apiMahasiswa 3-40

Gambar 3-14 Response GET apiMahasiswa 3-41

Gambar 3-15 Form GET apiMahasiswanim 3-41

Gambar 3-16 Response apiMahasiswanim 3-42

Gambar 3-17 Form PUT apiMahasiswa 3-43

Gambar 3-18 Response PUT apiMahasiswa 3-43

Gambar 3-19 Data telah diupdate 3-43

Gambar 3-20 Form DELETE apiMahasiswa 3-44

Gambar 3-21 Response DELETE apiMahasiswa 3-44

Gambar 3-22 Form POST apiMahasiswa 3-46

Gambar 3-23 Form PUT apiMahasiswa 3-47

Gambar 3-24 Respose GET dan POST 3-47

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model - Akademikedmx 3-48

Gambar 3-26 Entity Data Model Wizard ndash 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 Akademikedmx 3-50

Gambar 3-31 Form POST apiMahasiswa 3-55

Gambar 3-32 Response POST apiMahasiswa 3-55

Gambar 3-33 Form API GET apiMahasiswa 3-56

Gambar 3-34 Response API GET apiMahasiswa 3-57

Gambar 3-35 Form API GET apiMahasiswanim=nilai 3-57

Gambar 3-36 Response apiMahasiswanim=nilai 3-57

Gambar 3-37 Form PUT apiMahasiswa 3-58

Gambar 3-38 Response PUT apiMahasiswa 3-59

Gambar 3-39 Form DELETE apiMahasiswa 3-60

Gambar 3-40 Response DELETE apiMahasiswa 3-60

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan 3-60

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client Library 4-61

VI

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library 4-62

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating 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 MicrosoftAspNetWebApiClient pada project Windows

Phone 8 4-76

Gambar 4-12 Project Windows Phone App 4-77

Gambar 4-13 MahasiswaPagexaml 4-77

Gambar 4-14 WMAppManifestxml 4-78

Gambar 4-15 MahasiswaPagexaml 4-81

Gambar 4-16 MahasiswaDetailPagexaml 4-82

Gambar 4-17 MahasiswaAddPagexaml 4-88

1-1

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

(wwwyoutubecom) atau aplikasi web jejaring sosial seperti facebook (wwwfacebookcom)

atau twitter (wwwtwittercom) Tetapi dalam perkembangannya sekarang ini sudah sangat

umum perangkat smartphone pad atau tab sehingga tidak heran jika aplikasi web

mempunyai ldquopendampingrdquo dalam kehidupannya ldquoPendampingrdquo ini sering disebut dengan

aplikasi mobile Kenapa disebut ldquopendampingrdquo alih-alih sebagai ldquopesaingrdquo 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

Web ServerDatabase Server

Web Browserpada komputer

Internet

Aplikasi Web

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-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

IV

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 ASPNET 1-3

Gambar 2-1 Window Add New Project 2-5

Gambar 2-2 Window New ASPNET 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 ndash MicrosoftAspNetWebApiClient 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 ndash Get apiValues 2-24

Gambar 2-15 Form Test Client ndash response for Get apiValue 2-25

Gambar 2-16 Form Test Client ndash Post apiValues 2-25

Gambar 2-17 Form Test Client ndash response for POST apiValues 2-26

Gambar 2-18 Form Test Client ndash PUT apiValues 2-26

Gambar 2-19 Form Test Client ndash response for PUT apiValues 2-27

Gambar 2-20 Form Test Client ndash Delete apiValues 2-27

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues 2-28

Gambar 3-1 Form akses GET apiMatematika 3-31

Gambar 3-2 Output API GET apiMatematika 3-31

Gambar 3-3 Form akses GET apiMatematikaid 3-32

Gambar 3-4 Output API GET apiMatematikaid 3-32

Gambar 3-5 Form akses API GET apiMatematikaop=opampbil1=bil1ampbil2=bil2 3-34

Gambar 3-6 Response dari API GET apiMatematika op=opampbil1=bil1ampbil2=bil2 3-35

Gambar 3-7 Menambahkan database pada project 3-35

V

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml 3-36

Gambar 3-9 Data class Mahasiswa 3-37

Gambar 3-10 Form POST apiMahasiswa 3-39

Gambar 3-11 Response POST apiMahasiswa 3-39

Gambar 3-12 Hasil proses create data 3-40

Gambar 3-13 Form GET apiMahasiswa 3-40

Gambar 3-14 Response GET apiMahasiswa 3-41

Gambar 3-15 Form GET apiMahasiswanim 3-41

Gambar 3-16 Response apiMahasiswanim 3-42

Gambar 3-17 Form PUT apiMahasiswa 3-43

Gambar 3-18 Response PUT apiMahasiswa 3-43

Gambar 3-19 Data telah diupdate 3-43

Gambar 3-20 Form DELETE apiMahasiswa 3-44

Gambar 3-21 Response DELETE apiMahasiswa 3-44

Gambar 3-22 Form POST apiMahasiswa 3-46

Gambar 3-23 Form PUT apiMahasiswa 3-47

Gambar 3-24 Respose GET dan POST 3-47

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model - Akademikedmx 3-48

Gambar 3-26 Entity Data Model Wizard ndash 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 Akademikedmx 3-50

Gambar 3-31 Form POST apiMahasiswa 3-55

Gambar 3-32 Response POST apiMahasiswa 3-55

Gambar 3-33 Form API GET apiMahasiswa 3-56

Gambar 3-34 Response API GET apiMahasiswa 3-57

Gambar 3-35 Form API GET apiMahasiswanim=nilai 3-57

Gambar 3-36 Response apiMahasiswanim=nilai 3-57

Gambar 3-37 Form PUT apiMahasiswa 3-58

Gambar 3-38 Response PUT apiMahasiswa 3-59

Gambar 3-39 Form DELETE apiMahasiswa 3-60

Gambar 3-40 Response DELETE apiMahasiswa 3-60

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan 3-60

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client Library 4-61

VI

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library 4-62

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating 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 MicrosoftAspNetWebApiClient pada project Windows

Phone 8 4-76

Gambar 4-12 Project Windows Phone App 4-77

Gambar 4-13 MahasiswaPagexaml 4-77

Gambar 4-14 WMAppManifestxml 4-78

Gambar 4-15 MahasiswaPagexaml 4-81

Gambar 4-16 MahasiswaDetailPagexaml 4-82

Gambar 4-17 MahasiswaAddPagexaml 4-88

1-1

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

(wwwyoutubecom) atau aplikasi web jejaring sosial seperti facebook (wwwfacebookcom)

atau twitter (wwwtwittercom) Tetapi dalam perkembangannya sekarang ini sudah sangat

umum perangkat smartphone pad atau tab sehingga tidak heran jika aplikasi web

mempunyai ldquopendampingrdquo dalam kehidupannya ldquoPendampingrdquo ini sering disebut dengan

aplikasi mobile Kenapa disebut ldquopendampingrdquo alih-alih sebagai ldquopesaingrdquo 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

Web ServerDatabase Server

Web Browserpada komputer

Internet

Aplikasi Web

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-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

V

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml 3-36

Gambar 3-9 Data class Mahasiswa 3-37

Gambar 3-10 Form POST apiMahasiswa 3-39

Gambar 3-11 Response POST apiMahasiswa 3-39

Gambar 3-12 Hasil proses create data 3-40

Gambar 3-13 Form GET apiMahasiswa 3-40

Gambar 3-14 Response GET apiMahasiswa 3-41

Gambar 3-15 Form GET apiMahasiswanim 3-41

Gambar 3-16 Response apiMahasiswanim 3-42

Gambar 3-17 Form PUT apiMahasiswa 3-43

Gambar 3-18 Response PUT apiMahasiswa 3-43

Gambar 3-19 Data telah diupdate 3-43

Gambar 3-20 Form DELETE apiMahasiswa 3-44

Gambar 3-21 Response DELETE apiMahasiswa 3-44

Gambar 3-22 Form POST apiMahasiswa 3-46

Gambar 3-23 Form PUT apiMahasiswa 3-47

Gambar 3-24 Respose GET dan POST 3-47

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model - Akademikedmx 3-48

Gambar 3-26 Entity Data Model Wizard ndash 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 Akademikedmx 3-50

Gambar 3-31 Form POST apiMahasiswa 3-55

Gambar 3-32 Response POST apiMahasiswa 3-55

Gambar 3-33 Form API GET apiMahasiswa 3-56

Gambar 3-34 Response API GET apiMahasiswa 3-57

Gambar 3-35 Form API GET apiMahasiswanim=nilai 3-57

Gambar 3-36 Response apiMahasiswanim=nilai 3-57

Gambar 3-37 Form PUT apiMahasiswa 3-58

Gambar 3-38 Response PUT apiMahasiswa 3-59

Gambar 3-39 Form DELETE apiMahasiswa 3-60

Gambar 3-40 Response DELETE apiMahasiswa 3-60

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan 3-60

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client Library 4-61

VI

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library 4-62

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating 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 MicrosoftAspNetWebApiClient pada project Windows

Phone 8 4-76

Gambar 4-12 Project Windows Phone App 4-77

Gambar 4-13 MahasiswaPagexaml 4-77

Gambar 4-14 WMAppManifestxml 4-78

Gambar 4-15 MahasiswaPagexaml 4-81

Gambar 4-16 MahasiswaDetailPagexaml 4-82

Gambar 4-17 MahasiswaAddPagexaml 4-88

1-1

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

(wwwyoutubecom) atau aplikasi web jejaring sosial seperti facebook (wwwfacebookcom)

atau twitter (wwwtwittercom) Tetapi dalam perkembangannya sekarang ini sudah sangat

umum perangkat smartphone pad atau tab sehingga tidak heran jika aplikasi web

mempunyai ldquopendampingrdquo dalam kehidupannya ldquoPendampingrdquo ini sering disebut dengan

aplikasi mobile Kenapa disebut ldquopendampingrdquo alih-alih sebagai ldquopesaingrdquo 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

Web ServerDatabase Server

Web Browserpada komputer

Internet

Aplikasi Web

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-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

VI

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library 4-62

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating 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 MicrosoftAspNetWebApiClient pada project Windows

Phone 8 4-76

Gambar 4-12 Project Windows Phone App 4-77

Gambar 4-13 MahasiswaPagexaml 4-77

Gambar 4-14 WMAppManifestxml 4-78

Gambar 4-15 MahasiswaPagexaml 4-81

Gambar 4-16 MahasiswaDetailPagexaml 4-82

Gambar 4-17 MahasiswaAddPagexaml 4-88

1-1

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

(wwwyoutubecom) atau aplikasi web jejaring sosial seperti facebook (wwwfacebookcom)

atau twitter (wwwtwittercom) Tetapi dalam perkembangannya sekarang ini sudah sangat

umum perangkat smartphone pad atau tab sehingga tidak heran jika aplikasi web

mempunyai ldquopendampingrdquo dalam kehidupannya ldquoPendampingrdquo ini sering disebut dengan

aplikasi mobile Kenapa disebut ldquopendampingrdquo alih-alih sebagai ldquopesaingrdquo 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

Web ServerDatabase Server

Web Browserpada komputer

Internet

Aplikasi Web

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-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-1

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

(wwwyoutubecom) atau aplikasi web jejaring sosial seperti facebook (wwwfacebookcom)

atau twitter (wwwtwittercom) Tetapi dalam perkembangannya sekarang ini sudah sangat

umum perangkat smartphone pad atau tab sehingga tidak heran jika aplikasi web

mempunyai ldquopendampingrdquo dalam kehidupannya ldquoPendampingrdquo ini sering disebut dengan

aplikasi mobile Kenapa disebut ldquopendampingrdquo alih-alih sebagai ldquopesaingrdquo 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

Web ServerDatabase Server

Web Browserpada komputer

Internet

Aplikasi Web

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-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-2

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 ServerDatabase Server

Internet

WebService

AplikasiMobile

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-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-3

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 ServerDatabase Server

Internet

WebService

Aplikasi Mobile

Aplikasi WebAplikasi Desktop

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 ASPNET

Web API yang merupakan framework yang didesain untuk menyederhanakan arsitektur web

service

ASPNET amp Visual Studio 2013

Terdapat dua tipe aplikasi web ASPNET 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

httpwwwrezafaisalnetp=902

Gambar 1-4 Ebook seri ASPNET

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-4

Rangkuman

Pada bab ini telah dijelaskan beberapa hal sebagai berikut

1 Pengantar web service

2 Pengantar ASPNET

3 Pengantar Visual Studio

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-5

2

Perkenalan

Pada bagian ini akan dilakukan perkenalan dengan ASPNET Web API dengan cara membuat

kode program secara langsung Kode program yang akan dibuat terdiri atas 2 cara yaitu

1 Project Web API yaitu membuat kode program Web API secara khusus dari awal

dengan template project yang telah disediakan

2 Penambahkan Web API pada existing project web yaitu menambahkan class Web

API controller pada project web application atau website ASPNET Web Form atau

ASPNET 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 gt New Project Pada window

Add New Project pilih Visual C gt Web gt ASPNET Web Application

Gambar 2-1 Window Add New Project

Tuliskan nama project pada kolom Name kemudian klik tombol OK Kemudian pada

window New ASPNET Project pilih Web API dan klik tombol OK

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-6

Gambar 2-2 Window New ASPNET 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-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-7

server dari project ini dan melihat pada web browser dengan cara klik kanan pada project

WebAPI yang ada pada Solution Explorer kemudian pilih Debug gt 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 gt New Project kemudian pada window Add New Project pilih Visual C gt Web gt

ASPNET Web Application Kemudian pada window New ASPNET 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-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-8

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 gt Web API Controller

Class (v2) seperti yang terlihat pada gambar di bawah ini Dan beri nama ValuesController

sebagai nama class tersebut

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-9

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 WebApiConfigcs yang terdapat pada folder App_Start

2 Globalasax yang terdapat pada

3 ValuesControllercs yang terdapat pada folder Controllers

File WebApiConfigcs berfungsi sebagai konfigurasi Web API routes yang menentukan

bagaimana format url untuk mengakses class-class controller Di bawah ini adalah isi dari file

ini WebApiConfigcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWebHttp

namespace WebAPIEmpty

public static class WebApiConfig

public static void Register(HttpConfiguration config)

Web API configuration and services

Web API routes

configMapHttpAttributeRoutes()

configRoutesMapHttpRoute(

name DefaultApi

routeTemplate apicontrollerid

defaults new id = RouteParameterOptional

)

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-10

Pada kode di atas dapat dilihat baris di bawah ini

routeTemplate apicontrollerid

dari format tersebut maka controller dapat diakses dengan cara menulis format url sebagai

berikut

http[nama_domain]api[nama_controller]

Jika kode pada WebApiConfigcs mempunyai baris sebagai berikut

routeTemplate webapicontrollerid

Maka format url untuk mengakses class controller akan menjadi sebagai berikut

http[nama_domain]webapi[nama_controller]

File kedua yang telah disebutkan adalah Globalasax dengan isi sebagai berikut Globalasax

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

using SystemWebHttp

using SystemWebRouting

namespace WebAPIEmpty

public class WebApiApplication SystemWebHttpApplication

protected void Application_Start()

GlobalConfigurationConfigure(WebApiConfigRegister)

File ini berfungsi untuk memanggil dan mengaktifkan konfigurasi Web API pada class

WebApiConfigcs saat aplikasi web dijalankan

Pada kedua project di atas nama class controller yang telah dibuat adalah

ValuesControllercs maka dapat ditulis url sebagai berikut

http[nama_domain]apiValues

Sedangkan jika nama class controller adalah CalculateControllercs maka class ini akan

dapat diakses dengan cara menulis url berikut

http[nama_domain]apiCalculate

Dari contoh tersebut maka dapat disimpulkan nama class controller akan mempunyai format

sebagai berikut

[nama_controller]Controllercs

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-11

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 ASPNET Web Form Website

2 ASPNET Web Form Web Application

3 ASPNET MVC Web Application

ASPNET Web Form Web Application

Pada project Web Application secara default sudah memiliki file Globalasax sehingga yang

perlu dilakukan adalah

1 Menambahkan folder App_Start

2 Menambahkan file WebApiConfigcs ke dalam folder App_Start dengan isi seperti

yang telah dijelaskan pada bagian sebelumnya

3 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

4 Menambahkan folder Controllers

5 Menambahkan class Web API Controller pada folder Controllers pada saat

melakukan proses ini secara otomatis akan ditambahkan reference yang

berhubungan dengan Web API seperti SystemWebHttp dan lain-lain

Berikut ini adalah isi dari ketiga file yang telah dibuat tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETWebFormWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-12

Globalasaxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebSecurity using SystemWebSessionState using ASPNETWebFormWebAppApp_Start namespace ASPNETWebFormWebApp public class Global SystemWebHttpApplication protected void Application_Start(object sender EventArgs e) GlobalConfigurationConfigure(WebApiConfigRegister)

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-13

ASPNET MVC Web Application

Aplikasi web yang dibangun dengan ASPNET MVC dibuat sebagai project Web Application

seperti halnya yang telah dijelaskan pada bagian ASPNET 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 Globalasax di

bawah ini Baris GlobalConfigurationConfigure(WebApiConfigRegister) harus

berada sebelum RouteConfigRegisterRoutes(RouteTableRoutes) Globalasax

using ASPNETMVCWebAppApp_Start using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp using SystemWebMvc using SystemWebRouting namespace ASPNETMVCWebApp public class MvcApplication SystemWebHttpApplication protected void Application_Start() AreaRegistrationRegisterAllAreas() GlobalConfigurationConfigure(WebApiConfigRegister) RouteConfigRegisterRoutes(RouteTableRoutes)

Dan berikut adalah isi dari kedua file yang lain WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp namespace ASPNETMVCWebAppApp_Start public static class WebApiConfig public static void Register(HttpConfiguration config) Web API configuration and services Web API routes configMapHttpAttributeRoutes() configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-14

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETMVCWebAppControllers public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

ASPNET 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 Menambahkan folder App_Code

2 Menambahkan file WebApiConfigcs pada folder App_Code

3 Menambahkan file Globalasax

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-15

4 Menambahkan baris untuk mengaktifkan konfigurasi WebApiConfigcs ke dalam

file Globalasax

5 Menambahkan class Web API Controller pada folder App_Code

Berikut ini adalah isi dari ketiga file tersebut WebApiConfigcs

using System using SystemCollectionsGeneric using SystemLinq using SystemWeb using SystemWebHttp ltsummarygt Summary description for WebApiConfig ltsummarygt public static class WebApiConfig public static void Register(HttpConfiguration config) configRoutesMapHttpRoute( name DefaultApi routeTemplate apicontrollerid defaults new id = RouteParameterOptional )

Globalasax

lt Application Language=C gt ltscript runat=servergt void Application_Start(object sender EventArgs e) Code that runs on application startup WebApiConfigRegister(SystemWebHttpGlobalConfigurationConfiguration) 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-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-16

Note The Session_End event is raised only when the sessionstate mode is set to InProc in the Webconfig file If session mode is set to StateServer or SQLServer the event is not raised ltscriptgt

ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp public class ValuesController ApiController GET apiltcontrollergt public IEnumerableltstringgt Get() return new string[] value1 value2 GET apiltcontrollergt5 public string Get(int id) return value POST apiltcontrollergt public void Post([FromBody]string value) PUT apiltcontrollergt5 public void Put(int id [FromBody]string value) DELETE apiltcontrollergt5 public void Delete(int id)

Halaman Bantuan ASPNET Web API

Halaman bantuan ASPNET 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 OrganizationControllercs

2 ValuesControllercs

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-17

Sehingga dapat dilihat pada halaman bantuan terdapat

1 Organization

2 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 OrganizationControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-18

namespace WebAPIControllers public class OrganizationController ApiController GET apiltcontrollergt public IEnumerableltstringgt GetAll() return new string[] value1 value2 GET apiltcontrollergt5 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 ASPNET Web API 21

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 ASPNET Web API 21 Help Page kemudian klik tombol Install Setelah proses

pengunduhan dan installasi paket tersebut selesai maka akan dapat dilihat terdapat tambahan

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-19

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 url berikut

http[nama_domain]Help

Cara ini dapat diimplementasikan pada template project tipe Web Application dan Website

baik untuk ASPNET Web Form atau ASPNET MVC

HTTP Verb

Pada contoh kode di atas terdapat 5 method yang akan menjadi API dan terdiri atas 4

kelompok berdasarkan HTTP verb yaitu

1 GET dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengambil atau membaca data Method pada kelompok ini biasanya

mengembalikan suatu keluaranoutput yang kadang bisa disebut sebagai function

2 POST dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

membuat (create) itemresource baru Kelompok method ini biasanya tidak

mengembalikan keluaranoutput yang kadang disebut procedure

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-20

3 PUT dalam penggunaannya method untuk kelompok HTTP verb ini adalah untuk

mengupdate itemresource yang telah ada (procedure seperti pada point 2)

4 DELETE dalam penggunaannya method untuk kelompok HTTP verb ini adalah

untuk menghapus itemresource yang telah ada (procedure seperti pada point 2)

Untuk itu nama-nama method yang berada pada suatu class Web API controller akan sama

dengan HTTP verb di atas yaitu Get Post Put dan Delete sebagai prefix dari nama method

pada class controller Sebagai contoh jika nama method adalah GetProduct GetProductById

atau GetAll maka API dari method tersebut akan termasuk dalam kelompok HTTP verb GET

Sedangkan jika nama method adalah PostProduct maka API dari method tersebut akan

termasuk dalam kelompok HTTP verb POST

Cara lain untuk menentukan method ke dalam suatu HTTP verb bisa dengan cara

memberikan atribute pada method tersebut Sebagai contoh pada kode di bawah ini ValuesControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ASPNETWebFormWebAppControllers public class ValuesController ApiController [HttpGet] public IEnumerableltstringgt 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-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-21

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 gt 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]portapi[nama_controller]

Misal alamat akses project tersebut adalah httplocalhost11739 dan nama class controller

adalah ValuesControllercs maka alamat yang diakses adalah

httplocalhost11739apiValues

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-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-22

A Simple Test Client for ASPNET Web API

Tool ini adalah tool client untuk ASPNET 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 ASPNET 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 ASPNET Web API pada kolom pencarian Maka akan

dapat dilihat daftar berikut ini pada window Manage NuGet Packages

Gambar 2-11 Manage NuGet Package ndash MicrosoftAspNetWebApiClient

Kemudian klik install dan setelah proses pengunduhan dan installasi selesai maka langkah

selanjutnya adalah melakukan modifikasi file Apicshtml yang terletak pada folder

AreasHelpPageViewsHelp dengan kode seperti berikut ini Apicshtml

using SystemWebHttp using WebAPIAreasHelpPageModels model HelpPageApiModel var description = ModelApiDescription ViewBagTitle = descriptionHttpMethodMethod + + descriptionRelativePath ltdiv id=bodygt ltsection class=featuredgt ltdiv class=content-wrappergt ltpgt

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-23

HtmlActionLink(Help Page Home Index) ltpgt ltdivgt ltsectiongt ltsection class=content-wrapper main-content clear-fixgt HtmlDisplayFor(m =gt Model) ltsectiongt ltdivgt HtmlDisplayForModel(TestClientDialogs) section Scripts HtmlDisplayForModel(TestClientReferences) ltlink type=textcss href=~AreasHelpPageHelpPagecss rel=stylesheet gt

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-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-24

Gambar 2-13 Tombol Test API

Ketika tombol Test API diklik maka akan dapat dilihat form seperti berikut

Gambar 2-14 Form Test Client ndash Get apiValues

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-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-25

Gambar 2-15 Form Test Client ndash response for Get apiValue

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 ndash Post apiValues

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-26

Gambar 2-17 Form Test Client ndash response for POST apiValues

Gambar 2-18 Form Test Client ndash PUT apiValues

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-27

Gambar 2-19 Form Test Client ndash response for PUT apiValues

Gambar 2-20 Form Test Client ndash Delete apiValues

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-28

Gambar 2-21 Form Test Client ndash Response for DELETE apiValues

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 ASPNET Web API

Hal-hal yang telah dibahas pada bagian ini adalah

1 Pembuatan aplikasi web ASPNET Web API dengan menggunakan template porject

yang telah disediakan pada Visual Studio

2 Pembuatan class controller Web API pada project yang telah ada sebelumnya

Pembuatan ini juga disertai dengan penjelasan pembuatan folder dan file pendukung

serta konfigurasi yang harus dilakukan agar class controller tersebut dapat diakses

dan digunakan

3 Cara mengakses Web API yang telah dibuat

4 Pembuatan halaman bantuan (help page) Web API yang berguna untuk melihat

daftar class controller serta API yang terdapat didalamnya

5 Installasi dan konfigurasi Tool test client yang sederhana yang berfungsi untuk

mengakses dan menguji API yang telah dibuat

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-29

3

Contoh-Contoh Web API

Pada bagian ini akan diberikan contoh-contoh sederhana Web API yang dimulai dengan

pembuatannya pengaksesan dan pengujiannya dengan menggunakan tool test client yang

telah dibahas pada bab sebelumnya

API Matematika

API ini adalah berisi kode sederhana yang berfungsi untuk melakukan beberapa hal berikut

ini

1 Menampilkan bilangan 1 sampai dengan 10

2 Menampilkan kata dari suatu angka yang dimasukkan antara 1 sampai 10

3 Melakukan operasi matematika sederhana pada dua bilangan yang dimasukkan

API ini hanya terdiri atas method Get Berikut adalah kode dari API ini

MatematikaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp namespace ContohWebAPIControllers public class MatematikaController ApiController ltsummarygt Mengembalikan bilangan 1 sampai 10 ltsummarygt ltreturnsgtltreturnsgt public IEnumerableltintgt Get() return new int[] 1 2 3 4 5 6 7 8 9 10 ltsummarygt Mengembalikan string dari angka yang dimasukkan ltsummarygt ltparam name=idgtltparamgt ltreturnsgtltreturnsgt public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2))

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-30

result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(10)) result = Sepuluh return result ltsummarygt Operasi matematika sederhana ltsummarygt ltparam name=opgtoperatorltparamgt ltparam name=bil1gtbilangan pertamaltparamgt ltparam name=bil2gtbilangan kedualtparamgt ltreturnsgtltreturnsgt public double Get(string op string bil1 string bil2) double result = 0 int bilangan1 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali))

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-31

result = bilangan1 bilangan2 else if (opEquals(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 apiMatematika

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url http[nama_domain]apiMatematika

Hasil yang dapat dilihat setelah mengklik tombol Send adalah seperti pada gambar di bawah

ini

Gambar 3-2 Output API GET apiMatematika

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-32

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller

berikut public IEnumerableltintgt 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 apiMatematikaid

dimana id adalah angka yang akan dimasukkan sebagai inputan

Gambar 3-3 Form akses GET apiMatematikaid

Dari form tersebut didapat beberapa informasi sebagai berikut

1 HTTP verb yang digunakan adalah GET

2 Cara akses API ini dengan menggunakan url

http[nama_domain]apiMatematikaid

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 apiMatematikaid

Informasi yang didapat dari respose yang diberikan adalah

1 Status 200OK

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-33

2 Header yang berisikan informasi header dari output

3 Body yang berisikan output sesuai dengan output method dari class controller berikut public string Get(int id) string result = StringEmpty if (idEquals(1)) result = Satu else if (idEquals(2)) result = Dua else if (idEquals(3)) result = Tiga else if (idEquals(4)) result = Empat else if (idEquals(5)) result = Lima else if (idEquals(6)) result = Enam else if (idEquals(7)) result = Tujuh else if (idEquals(8)) result = Delapan else if (idEquals(9)) result = Sembilan else if (idEquals(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-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-34

Gambar 3-5 Form akses API GET

apiMatematikaop=opampbil1=bil1ampbil2=bil2

Informasi yang dapat dilihat berdasarkan gambar tersebut adalah

1 HTTP verb yang digunakan adalah GET

2 url akses API ini adalah http[nama_domain]apiMatematikaop=+ampbil1=7ampbil2=13

3 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 = ConvertToInt32(bil1) int bilangan2 = ConvertToInt32(bil2) if (opEquals(tambah)) result = bilangan1 + bilangan2 else if (opEquals(kurang)) result = bilangan1 - bilangan2 else if (opEquals(kali)) result = bilangan1 bilangan2 else if (opEquals(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-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-35

Gambar 3-6 Response dari API GET apiMatematika

op=opampbil1=bil1ampbil2=bil2

API CRUD ndash 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 Pembuatan database dan tabel

2 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 gt SQL

Server Database

Gambar 3-7 Menambahkan database pada project

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-36

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 Akademikdbml

Pada kasus ini file Akademikdbml ditambahkan ke dalam folder Models

Gambar 3-8 LINQ to SQL Classes ndash Akademikdbml

Kemudian tambahkan data class Mahasiswa dengan cara drag tabel Mahasiswa ke area

designer Akademikdbml

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-37

Gambar 3-9 Data class Mahasiswa

Setelah persiapan hal-hal di atas telah dilakukan maka dapat dapat ditambahkan class Web

API controller dengan nama MahasiswaControllercs ke dalam folder Controllers

Berikut ini adalah kode dari class ini

MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using ContohWebAPIModels namespace ContohWebAPIControllers public class MahasiswaController ApiController GET apiltcontrollergt public IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data GET apiltcontrollergt5 public Mahasiswa GetMahasiswa(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-38

POST apiltcontrollergt public void Post(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = new Mahasiswa() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges() DELETE apiltcontrollergt5 public void Delete(int nim) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item)

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-39

dbSubmitChanges()

Pada gambar berikut diperlihatkan form POST apiMahasiswa pada tool test client untuk

menguji API dari method di atas

Gambar 3-10 Form POST apiMahasiswa

Dari pada gambar di bawah ini adalah respose dari aksi di atas

Gambar 3-11 Response POST apiMahasiswa

Pada gambar di bawah dapat dilihat data baru yang ditambahkan pada tabel Mahasiswa

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-40

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 IQueryableltMahasiswagt GetMahasiswa() AkademikDataContext db = new AkademikDataContext() var data = dbMahasiswasSelect(p =gt p) return data

Pada gambar di bawah ini diperlihatkan form GET apiMahasiswa

Gambar 3-13 Form GET apiMahasiswa

Hasil dari API ini akan memberikan response berupa data berikut ini

[

NIM1NamaRezaAlamatAlamat 1Umur30JurusanIlkom

NIM2NamaFaisalAlamatAlamat 2Umur31JurusanIlkom

NIM3NamaFahleviAlamatAlamat 3Umur32JurusanIlkom

NIM4NamaAdiAlamatBanjarbaruUmur25JurusanIlkom

]

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-41

Dan gambar berikut memperlihatkan response dari GET apiMahasiswa

Gambar 3-14 Response GET apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() return item

Berikut ini adalah form GET apiMahasiswanim

Gambar 3-15 Form GET apiMahasiswanim

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-42

Hasil dari API ini adalah sebagai berikut

NIM4

NamaAdi

AlamatBanjarbaru

Umur25

JurusanIlkom

Dan gambar berikut ini adalah gambar response dari API ini

Gambar 3-16 Response apiMahasiswanim

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Gambar di bawah ini adalah form yang dipergunakan untuk input data untuk menguji API

ini

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-43

Gambar 3-17 Form PUT apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-18 Response PUT apiMahasiswa

Dari berikut adalah perubahan data yang dapat dilihat pada tambal Mahasiswa

Gambar 3-19 Data telah diupdate

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-44

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasDeleteOnSubmit(item) dbSubmitChanges()

Berikut ini adalah form untuk menguji API DELETE apiMahasiswa

Gambar 3-20 Form DELETE apiMahasiswa

Dan berikut adalah response dari API ini

Gambar 3-21 Response DELETE apiMahasiswa

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-45

Penggunaan Atribute [FromBody]

Pada contoh kode untuk input (create) dan update data pada bagian API CRUD ndash 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() itemNIM = nim itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbMahasiswasInsertOnSubmit(item) dbSubmitChanges() PUT apiltcontrollergt5 public void Put(int nim string nama string alamat int umur string jurusan) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = nama itemAlamat = alamat itemUmur = umur itemJurusan = jurusan dbSubmitChanges()

Pada method Post dan Put terdapat parameter-parameter berikut ini

1 nim

2 nama

3 alamat

4 umur

5 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 apiltcontrollergt public void Post([FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() dbMahasiswasInsertOnSubmit(mhs) dbSubmitChanges()

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-46

PUT apiltcontrollergt5 public void Put(int nim [FromBody]Mahasiswa mhs) AkademikDataContext db = new AkademikDataContext() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSubmitChanges()

Pada tahap pengujian dapat dilihat form POST apiMahasiswa seperti pada gambar di bawah

ini

Gambar 3-22 Form POST apiMahasiswa

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-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-47

Gambar 3-23 Form PUT apiMahasiswa

API CRUD ndash Entity Framework

Pada contoh class controller MahasiswaControllercs di atas yaitu pada bagian API CRUD

ndash 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 Status response yang diberikan untuk API bertipe GET memiliki status 200OK

sedangkan untuk API bertipe POST memiliki nilai status 204No Content

2 Body pada bagian ini terdapat nilai berupa data mahasiswa dalam format JSON

sebagai response GET sedangkan pada bagian body di form response POST bernilai

kosong

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-48

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

ADONET Entity Data Model

Untuk implementasi Entity Framework pada API ini maka terlebih dahulu perlu

ditambahakan ADONET Entity Data Model pada project Pertama adalah dengan klik kanan

pada project kemudian pilih Add gt Add New Item

Gambar 3-25 Window Add New Item ndash ADONET Entity Data Model -

Akademikedmx

Pada kolom input Name berikan nilai Akademikedmx kemudian klik tombol Add

Gambar 3-26 Entity Data Model Wizard ndash Generate from Database

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-49

Gambar 3-27 Pembuatan connection string

Gambar 3-28 Pemilihan versi Entity Framework

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-50

Gambar 3-29 Pemilihan tabel

Gambar 3-30 Antarmuka designer Akademikedmx

Class OutputModelcs

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-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-51

Keterangan

1 status adalah atribut yang memberikan nilai success dan error dari API yang diakses

2 data adalah atribut yang akan memberikan data dari API yang diakses dalam format

JSON Dalam kasus ini jika diminta data mahasiswa maka bagian tersebut akan

memberikan data mahasiswa seperti contoh berikut ini

statussuccess

data[

NIM1

NamaReza

AlamatAlamat 1

Umur30JurusanIlkom

NIM2

NamaFaisal

AlamatAlamat 2

Umur31JurusanIlkom

]

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 OutputModelcs

seperti berikut ini OutputModelcs

using System

using SystemCollectionsGeneric

using SystemLinq

using SystemWeb

namespace APICRUDEFModels

public class OutputModel

public string status get set

public object data get set

public string message get set

Class MahasiswaControllercs

Selanjutnya adalah membuat class Web API Controller dengan nama

MahasiswaControllercs 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 OutputModelcs yang telah

dibuat sebelumnya Kemudian pada class ini juga digunakan penggunaan atribut [HttpGet]

[HttpPost] [HttpPut] dan [HttpDelete] pada method yang bersesuaian

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-52

Berikut ini adalah kode dari class MahasiswaControllercs MahasiswaControllercs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemNetHttp using SystemWebHttp using APICRUDEFModels namespace APICRUDEFControllers public class MahasiswaController ApiController [HttpGet] public OutputModel Select() OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-53

return output [HttpPost] public OutputModel Save([FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output [HttpPut] public OutputModel Update(int nim [FromBody]Mahasiswa mhs) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-54

[HttpDelete] public OutputModel Remove(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = 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() dbMahasiswasAdd(mhs) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa berhasil disimpan outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-55

Gambar berikut adalah form akses POST apiMahasiswa

Gambar 3-31 Form POST apiMahasiswa

Gambar 3-32 Response POST apiMahasiswa

Dari gambar di atas dapat dilihat response dari API POST apiMahasiswa 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-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-56

try AkademikEntities db = new AkademikEntities() var data = dbMahasiswasSelect(p =gt p) outputstatus = success outputmessage = StringEmpty outputdata = data catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

[HttpGet] public OutputModel SelectById(int nim) OutputModel output = new OutputModel() try AkademikEntities db = new AkademikEntities() Mahasiswa item = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() outputstatus = success outputmessage = StringEmpty outputdata = item catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut adalah form dan response dari API apiMahasiswa untuk menampilkan seluruh data

Gambar 3-33 Form API GET apiMahasiswa

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-57

Gambar 3-34 Response API GET apiMahasiswa

Sedangkan berikut adalah form dan response dari API GET apiMahasiswanim=nilai_nim

Gambar 3-35 Form API GET apiMahasiswanim=nilai

Gambar 3-36 Response apiMahasiswanim=nilai

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-58

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() itemNama = mhsNama itemAlamat = mhsAlamat itemUmur = mhsUmur itemJurusan = mhsJurusan dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil diupdate outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Berikut ini adalah gambar form akses API ini

Gambar 3-37 Form PUT apiMahasiswa

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-59

Gambar 3-38 Response PUT apiMahasiswa

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 = dbMahasiswasWhere(p =gt pNIMEquals(nim))SingleltMahasiswagt() dbMahasiswasRemove(item) dbSaveChanges() outputstatus = success outputmessage = Data mahasiswa dengan NIM + nim + berhasil dihapus outputdata = StringEmpty catch (Exception ex) outputstatus = error outputmessage = exMessage outputdata = null return output

Dan gambar berikut adalah gambar dari tool test client yang digunakan untuk menguji API

ini

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-60

Gambar 3-39 Form DELETE apiMahasiswa

Gambar 3-40 Response DELETE apiMahasiswa

Berikut ini adalah contoh response jika terjadi kesalahan misal dimasukkan nilai NIM yang

tidak terdapat dalam tabel Mahasiswa

Gambar 3-41 Response DELETE apiMahasiswa yang menampilkan kesalahan

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-61

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 ASPNET Web Form atau Windows Phone

MatematikaConsole

Pada bagian ini dijelaskan bagaimana mengakses Web API dari aplikasi console Aplikasi

console yang dibuat akan mengakses class Web API controller MatematikaControllercs

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

ASPNET Web API 21 Client Library pada project tersebut Cara mudah untuk melakukan

ini adalah dengan menggunakan fitur Manage NuGet Packages kemudian gunakan kata

kunci berikut MicrosoftAspNetWebApiClient maka akan didapat daftar berikut ini

Gambar 4-1 Manage NuGet Packages ndash Microsoft ASPNET Web API 21 Client

Library

Klik tombol Install untuk menginstall

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-62

Gambar 4-2 Installasi Microsoft ASPNET Web API 21 Client Library

Hasilnya dapat dilihat pada folder Reference terdapat tambahan namespace baru seperti

SystemNetHttp dan SystemNetHttpFormating

Gambar 4-3 Folder Reference ndash SystemNetHttp dan SystemNetHttpFormating

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-63

Selanjutnya pada class Programcs akan ditambah baris-baris kode seperti berikut ini Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MatematikaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey() static async Task RunAsync() using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(apiMatematika) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematika3) if (responseIsSuccessStatusCode) SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode) SystemConsoleWriteLine() response = await clientGetAsync(apiMatematikaop=tambahampbil1=13ampbil2=23) if (responseIsSuccessStatusCode)

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-64

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result) else SystemConsoleWriteLine(responseStatusCode)

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 SystemNetHttp

using SystemNetHttpHeaders

Kemudian untuk mengakses salah satu API pada class controller MatematikaControllercs

digunakan kode sebagai berikut using (var client = new HttpClient())

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptClear()

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = await

clientGetAsync(apiMatematika)

if (responseIsSuccessStatusCode)

SystemConsoleWriteLine(responseContentReadAsStringAsync()Result)

else

SystemConsoleWriteLine(responseStatusCode)

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

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson))

Baris di atas menentukan output yang akan didapat jika ingin format output berupa XML

maka baris di atas dapat diubah menjadi berikut ini

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-65

clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationxml))

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 clientGetAsync(apiMatematika)

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

MatematikaControllercs hanya terdapat method-method kelompok HTTP verb GET saja

MahasiswaConsole

Contoh pada bagian ini akan mengakses API dari class controller MahasiswaControllercs

yang telah dicontohkan pada bagian API CRUD ndash LINQ to SQL Berikut ini adalah kode

lengkap dari aplikasi MahasiswaConsole Programcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemText using SystemThreadingTasks namespace MahasiswaConsole class Program static void Main(string[] args) RunAsync()Wait() SystemConsoleReadKey()

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-66

static async Task RunAsync() string serviceUrl = apiMahasiswa using (var client = new HttpClient()) clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) Input data mahasiswa baru Mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 23 mahasiswaNama=Nama 23 mahasiswaUmur=23 mahasiswaAlamat = Alamat 23 mahasiswaJurusan = Ilkom HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil disimpan) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Update data mahasiswa mahasiswa = new Mahasiswa() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-67

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil diupdate) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Hapus data mahasiswa response = clientDeleteAsync(serviceUrl+nim=23)Result if (responseIsSuccessStatusCode) SystemConsoleWriteLine(Data mahasiswa berhasil dihapus) else SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) SystemConsoleWriteLine() Menampilkan data mahasiswa response = await clientGetAsync(serviceUrl) if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result foreach (Mahasiswa m in mhs) SystemConsoleWriteLine(mNama) else

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-68

SystemConsoleWriteLine(0 (1) (int)responseStatusCode responseReasonPhrase) 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 ReadAsAsync method ini berfungsi untuk mengakses API GET

2 PostAsJsonAsync method ini berfungsi untuk mengakses API POST

3 PutAsJsonAsync method ini berfungsi untuk mengakses API PUT

4 DeleteAsync method ini berfungsi untuk mengakses API DELETE

Create

Untuk menyimpan data baru ke dalam database dapat dilihat pada baris kode berikut ini Input data mahasiswa baru

Mahasiswa mahasiswa = new Mahasiswa()

mahasiswaNIM = 23

mahasiswaNama=Nama 23

mahasiswaUmur=23

mahasiswaAlamat = Alamat 23

mahasiswaJurusan = Ilkom

HttpResponseMessage response = clientPostAsJsonAsync(serviceUrl

mahasiswa)Result

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 clientGetAsync(serviceUrl)

if (responseIsSuccessStatusCode)

var mhs =

responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result

foreach (Mahasiswa m in mhs)

SystemConsoleWriteLine(mNama)

else

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-69

SystemConsoleWriteLine(0 (1) (int)responseStatusCode

responseReasonPhrase)

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() mahasiswaNIM = 24 mahasiswaNama = Nama 24 mahasiswaUmur = 24 mahasiswaAlamat = Alamat 24 mahasiswaJurusan = Ilkom

response = clientPutAsJsonAsync(serviceUrl+nim=23 mahasiswa)Result

Delete

Sedangkan untuk menghapus data dapat digunakan method DeleteAsync yang

penggunaannya dapat dilihat pada kode di bawah ini

response = clientDeleteAsync(serviceUrl+nim=23)Result

MahasiswaWebsite

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 MicrosoftAspNetWebApiClient seperti yang juga

ditambahkan pada contoh di atas

Menampilkan Data Mahasiswa

Berikut ini adalah contoh aplikasi web untuk menampilkan data mahasiswa pada GridView AksesAPIMahasiswaHttpClientaspx

lt Page Language=C AutoEventWireup=true CodeFile=AksesAPIMahasiswaHttpClientaspxcs Inherits=AksesAPIMahasiswaHttpClient gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgt

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-70

ltaspGridView ID=GridView_Main runat=servergtltaspGridViewgt ltdivgt ltformgt ltbodygt lthtmlgt

Dan berikut adalah behind code dari file di atas AksesAPIMahasiswaHttpClientaspxcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNetHttp using SystemNetHttpHeaders using SystemThreadingTasks using SystemWeb using SystemWebUI using SystemWebUIWebControls public partial class AksesAPIMahasiswaHttpClient SystemWebUIPage protected void Page_Load(object sender EventArgs e) GetDataMahasiswa() protected void GetDataMahasiswa() HttpClient client = new HttpClient() clientBaseAddress = new Uri(httplocalhost8492) clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = clientGetAsync(apiMahasiswa)Result if (responseIsSuccessStatusCode) var data = responseContentReadAsAsyncltIEnumerableltMahasiswagtgt()Result GridView_MainDataSource = data GridView_MainDataBind() else Label_MessageText = Error Code + responseStatusCode + Message - + responseReasonPhrase 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 Mahasiswacs yang disimpan pada folder App_Code

pada project Website

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-71

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 ltaspLabel ID=Label_Message runat=server Text=gtltaspLabelgtltbr gt NIM ltaspTextBox ID=TextBox_NIM runat=servergtltaspTextBoxgtltbr gt Nama ltaspTextBox ID=TextBox_Nama runat=servergtltaspTextBoxgtltbr gt Umur ltaspTextBox ID=TextBox_Umur runat=servergtltaspTextBoxgtltbr gt Alamat ltaspTextBox ID=TextBox_Alamat runat=servergtltaspTextBoxgtltbr gt Jurusan ltaspTextBox ID=TextBox_Jurusan runat=servergtltaspTextBoxgtltbr gt ltaspButton ID=Button_Simpan OnClick=Button_Simpan_Click runat=server Text=Simpan gt

lthr gt

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()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPostAsJsonAsync(apiMahasiswa mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil disimpan

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-72

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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 ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltColumnsgt ltaspGridViewgt

Dan method GridView_Main_SelectedIndexChanged berisi seperti berikut protected void GridView_Main_SelectedIndexChanged(object sender EventArgs

e)

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-73

HttpResponseMessage response = clientGetAsync(apiMahasiswanim= +

id)Result

if (responseIsSuccessStatusCode)

Mahasiswa item = responseContentReadAsAsyncltMahasiswagt()Result

TextBox_NIMText = itemNIM

TextBox_NamaText = itemNama

TextBox_UmurText = itemUmurToString()

TextBox_AlamatText = itemAlamat

TextBox_JurusanText = itemJurusan

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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

ltaspButton ID=Button_Update OnClick=Button_Update_Click Visible=false runat=server Text=Update gt

Dan berikut adalah isi dari method Button_Update_Click protected void Button_Update_Click(object sender EventArgs e)

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-74

string id = ConvertToString(GridView_MainSelectedValue)

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

Mahasiswa mhs = new Mahasiswa()

mhsNIM = TextBox_NIMText

mhsNama = TextBox_NamaText

mhsUmur = ConvertToInt32(TextBox_UmurText)

mhsAlamat = TextBox_AlamatText

mhsJurusan = TextBox_JurusanText

HttpResponseMessage response =

clientPutAsJsonAsync(apiMahasiswanim= + id mhs)Result

if (responseIsSuccessStatusCode)

Label_MessageText = Data mahasiswa berhasil diupdate

TextBox_NIMText = StringEmpty

TextBox_NamaText = StringEmpty

TextBox_UmurText = StringEmpty

TextBox_AlamatText = StringEmpty

TextBox_JurusanText = StringEmpty

Button_UpdateVisible = true

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

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-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-75

Untuk membuat link Delete seperti di atas maka perlu modifikasi pada control GridView ltaspGridView ID=GridView_Main OnSelectedIndexChanged=GridView_Main_SelectedIndexChanged OnRowDeleting=GridView_Main_RowDeleting DataKeyNames=NIM runat=servergt ltColumnsgt ltaspCommandField ShowSelectButton=True gt ltaspCommandField ShowDeleteButton=True gt ltColumnsgt

ltaspGridViewgt

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_MainDataKeys[eRowIndex]Values[NIM]ToString()

HttpClient client = new HttpClient()

clientBaseAddress = new Uri(httplocalhost8492)

clientDefaultRequestHeadersAcceptAdd(new

MediaTypeWithQualityHeaderValue(applicationjson))

HttpResponseMessage response = clientDeleteAsync(apiMahasiswanim=

+ id)Result

if (responseIsSuccessStatusCode)

GetDataMahasiswa()

else

Label_MessageText = Error Code + responseStatusCode +

Message - + responseReasonPhrase

MahasiswaWP

Pada bagian ini akan diberikan contoh membuat aplikasi Windows Phone 8 Seperti contoh-

contoh sebelumnya pada contoh program ini juga akan menggunakan library

MicrosoftAspNetWebApiClient Oleh karena pada project ini perlu ditambahkan library

tersebut via Manage NuGet Packages

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-76

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 MicrosoftAspNetWebApiClient 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-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-77

Gambar 4-12 Project Windows Phone App

Setelah memberi nama project dengan nama MahasiswaWP kemudian klik OK

Pada contoh ini tidak akan digunakan file MainPagexaml sebagai file utama tetapi akan

digunakan file MahasiswaPagexaml

Oleh karena itu akan dilakukan beberapa hal agar file MahasiswaPagexaml dapat diakses

sebagai file default saat aplikasi Windows Phone dijalankan

Langkah pertama adalah membuat file MahasiswaPagexaml dengan cara klik kanan pada

project MahasiswaWP kemudian piliha Add gt New Item Pada window Add New Item pilih

Windows Phone Potrait Page kemudian beri nama MahasiswaPagexaml

Gambar 4-13 MahasiswaPagexaml

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-78

Langkah selanjutnya adalah mengedit file WPAppManifestxml 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 WMAppManifestxml

Pada kolom input Navigation Page ganti nama MainPagexaml dengan MahasiswaPagexaml

Menampilkan Data Mahasiswa

Untuk menampilkan menampilkan data mahasiswa pada halaman MahasiswaPagexaml

maka digunakan kode untuk mengakses Web API yang tidak terlalu berbeda dengan contoh-

contoh sebelumnya

Berikut adalah isi dari kode MahasiswaPagexaml dan MahasiswaPagexamlcs MahasiswaPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-79

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBaraddpng Text=tambahgt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=mahasiswa Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltphoneLongListSelector xName=LongListSelector_MainData SelectionChanged=LongListSelector_MainData_SelectionChangedgt ltphoneLongListSelectorItemTemplategt ltDataTemplategt ltStackPanel Margin=00017gt ltTextBlock Text=Binding Nama TextWrapping=Wrap Style=StaticResource PhoneTextExtraLargeStylegt ltTextBlock Text=Binding NIM TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Alamat TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltTextBlock Text=Binding Jurusan TextWrapping=Wrap Margin=12-6120 Style=StaticResource PhoneTextSubtleStylegt ltStackPanelgt ltDataTemplategt ltphoneLongListSelectorItemTemplategt ltphoneLongListSelectorgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemNetHttp

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-80

using SystemNetHttpHeaders using SystemThreadingTasks using MahasiswaWPViewModels namespace MahasiswaWP public partial class MahasiswaPage PhoneApplicationPage public MahasiswaPage() InitializeComponent() LongListSelector_MainData_DataBind() public async Task LongListSelector_MainData_DataBind() try HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientGetAsync(http1692548080akademikapiMahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) var mhs = responseContentReadAsAsyncltIEnumerableltMahasiswaModelgtgt()ResultToList() LongListSelector_MainDataItemsSource = mhs else MessageBoxShow(Gagal) catch(Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) NavigationServiceNavigate(new Uri(MahasiswaAddPagexaml UriKindRelative)) private void LongListSelector_MainData_SelectionChanged(object sender SelectionChangedEventArgs e) if (LongListSelector_MainDataSelectedItem == null) return PhoneApplicationServiceCurrentState[objMahasiswa] = LongListSelector_MainDataSelectedItem NavigationServiceNavigate(new Uri(MahasiswaDetailPagexaml UriKindRelative))

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-81

LongListSelector_MainDataSelectedItem = null

Selain kedua kode di atas juga dibuat class MahasiswaModelcs 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

MahasiswaModelcs tersebut MahasiswaModelcs

namespace MahasiswaWPViewModels 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 MahasiswaPagexaml

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-82

Memilih dan Update Data Mahasiswa

Dari halaman MahasiswaPagexaml yang telah dibuat diatas jika salah satu item dipilih maka

akan diarahkan ke halaman MahasiswaDetailPagexaml seperti pada gambar berikut

Gambar 4-16 MahasiswaDetailPagexaml

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 MahasiswaDetailPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaDetailPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-83

ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Delete Click=ApplicationBarIconButton_Delete_Click IconUri=AssetsAppBardeletepng Text=hapusgt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Update Click=ApplicationBarIconButton_Update_Click IconUri=AssetsAppBareditpng Text=updategt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock xName=TextBlock_Title Text=page name Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaDetailPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders using MahasiswaWPViewModels namespace MahasiswaWP

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-84

public partial class MahasiswaDetailPage PhoneApplicationPage public MahasiswaDetailPage() InitializeComponent() protected override void OnNavigatedTo(NavigationEventArgs e) try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] TextBlock_TitleText = itemNIM + - + itemNama TextBox_NamaText = itemNama TextBox_UmurText = ConvertToString(itemUmur) TextBox_AlamatText = itemAlamat TextBox_JurusanText = itemJurusan catch (Exception ex) MessageBoxShow(exMessage) public async Task UpdateMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPutAsJsonAsync(http1692548080akademikapiMahasiswanim= + itemNIM mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil diupdate) else MessageBoxShow(Data gagal diupdate) catch (Exception ex) MessageBoxShow(exMessage)

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-85

public async Task DeleteMahasiswa() try MahasiswaModel item = (MahasiswaModel)PhoneApplicationServiceCurrentState[objMahasiswa] HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientDeleteAsync(http1692548080akademikapiMahasiswanim= + itemNIM) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil dihapus) else MessageBoxShow(Data gagal dihapus) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Delete_Click(object sender EventArgs e) DeleteMahasiswa() private void ApplicationBarIconButton_Update_Click(object sender EventArgs e) UpdateMahasiswa()

Tambah Data Mahasiswa

Pada halaman MahasiswaPagexaml terdapat tombol untuk menambah data mahasiswa

yang akan mengantarkan ke halaman MahasiswaAddPagexaml Pada halaman tersebut akan

ditampilkan form untuk tambah data baru Berikut adalah isi dari file

MahasiswaAddPagexaml dan MahasiswaAddPagexamlcs MahasiswaAddPagexaml

ltphonePhoneApplicationPage xClass=MahasiswaWPMahasiswaAddPage xmlns=httpschemasmicrosoftcomwinfx2006xamlpresentation xmlnsx=httpschemasmicrosoftcomwinfx2006xaml xmlnsphone=clr-namespaceMicrosoftPhoneControlsassembly=MicrosoftPhone

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-86

xmlnsshell=clr-namespaceMicrosoftPhoneShellassembly=MicrosoftPhone xmlnsd=httpschemasmicrosoftcomexpressionblend2008 xmlnsmc=httpschemasopenxmlformatsorgmarkup-compatibility2006 FontFamily=StaticResource PhoneFontFamilyNormal FontSize=StaticResource PhoneFontSizeNormal Foreground=StaticResource PhoneForegroundBrush SupportedOrientations=Portrait Orientation=Portrait mcIgnorable=d shellSystemTrayIsVisible=Truegt ltphonePhoneApplicationPageApplicationBargt ltshellApplicationBargt ltshellApplicationBarIconButton xName=ApplicationBarIconButton_Add Click=ApplicationBarIconButton_Add_Click IconUri=AssetsAppBarsavepng Text=simpangt ltshellApplicationBargt ltphonePhoneApplicationPageApplicationBargt lt--LayoutRoot is the root grid where all page content is placed--gt ltGrid xName=LayoutRoot Background=Transparentgt ltGridRowDefinitionsgt ltRowDefinition Height=Autogt ltRowDefinition Height=gt ltGridRowDefinitionsgt lt--TitlePanel contains the name of the application and page title--gt ltStackPanel GridRow=0 Margin=1217028gt ltTextBlock Text=CONTOH WEB API Style=StaticResource PhoneTextNormalStylegt ltTextBlock Text=tambah data Margin=9-700 Style=StaticResource PhoneTextTitle1Stylegt ltStackPanelgt lt--ContentPanel - place additional content here--gt ltGrid xName=ContentPanel GridRow=1 Margin=120120gt ltStackPanelgt ltTextBlock Text=nim FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_NIM gt ltTextBlock Text=nama FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Nama gt ltTextBlock Text=umur FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Umur gt ltTextBlock Text=alamat FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Alamat gt ltTextBlock Text=jurusan FontSize=27 Margin=13000 gt ltTextBox xName=TextBox_Jurusan gt ltStackPanelgt ltGridgt ltGridgt ltphonePhoneApplicationPagegt

MahasiswaAddPagexamlcs

using System using SystemCollectionsGeneric using SystemLinq using SystemNet using SystemWindows using SystemWindowsControls

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-87

using SystemWindowsNavigation using MicrosoftPhoneControls using MicrosoftPhoneShell using MahasiswaWPViewModels using SystemThreadingTasks using SystemNetHttp using SystemNetHttpHeaders namespace MahasiswaWP public partial class MahasiswaAddPage PhoneApplicationPage public MahasiswaAddPage() InitializeComponent() public async Task InsertMahasiswa() try MahasiswaModel mahasiswa = new MahasiswaModel() mahasiswaNama = TextBox_NamaText mahasiswaAlamat = TextBox_AlamatText mahasiswaJurusan = TextBox_JurusanText mahasiswaUmur = ConvertToInt32(TextBox_UmurText) HttpClient client = new HttpClient() clientDefaultRequestHeadersAcceptClear() clientDefaultRequestHeadersAcceptAdd(new MediaTypeWithQualityHeaderValue(applicationjson)) HttpResponseMessage response = await clientPostAsJsonAsync(http1692548080akademikapiMahasiswa mahasiswa) responseEnsureSuccessStatusCode() if (responseIsSuccessStatusCode) MessageBoxShow(Data berhasil disimpan) else MessageBoxShow(Data gagal disimpan) catch (Exception ex) MessageBoxShow(exMessage) private void ApplicationBarIconButton_Add_Click(object sender EventArgs e) InsertMahasiswa()

Dan berikut ini adalah tampilan dari halaman ini

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-88

Gambar 4-17 MahasiswaAddPagexaml

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-89

5

Penutup

Sebagai kalimat penutup ebook ini dibuat untuk para developer sebagai pengenalan awal

pada ASPNET Web API Pada ebook ini hanya membahas hal-hal dasar seperti

1 Template project Web API

2 Cara akses Web API

3 Tool yang dapat digunakan untuk test client sehingga dapat mempermudah untuk

menguji API

4 Contoh-contoh program untuk mengakses Web API yang telah dibuat

Diharapkan dengan adanya ebook ini pada developer mempunyai pengetahuan awal akan

Web API

Pada ebook selanjutnya akan lebih dibahas lebih mendalam tentang Web API seperti

1 Authentifikasi

2 Keamanan (security)

3 Dan lain-lain

Kritik dan saran dapat ditujukan langsung via email ke rezafaisal [at] gmail [dot] com

1-90

1-91

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

1-90

1-91

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

1-91