AGENDA
Tutorials - .NET
Web Service Pada VS 2010 VB.NET Versi 4



Windows Communication Foundation (WCF) adalah sebuah SDK untuk mengembangkan aplikasi berbasis service pada system operasi Windows. WCF menyediakan sebuah lingkungan kerja yang memungkinkan software developer mengeksplorasi berbagai tipe CLR sebagai service, dan selanjutnya memanfaatkan berbagai service lainnya sebagai CLR.

Pada tutorial kali ini, Aplysit Corp akan mengajak Anda untuk memulai sebuah proyek sederhana, dan memahami cara membuat aplikasi berbasis Web Service.

Tutorial tersebut akan dibagi menjadi beberapa bagian global yaitu:

1. Bekerja dengan solution
2. Membuat proyek dengan WCF
3. Membuat aplikasi client berbasis desktop yang akan menggunakan service
4. Implementasi source code untuk kasus penjumlahan dua bilangan.

Bekerja Dengan Solution

Visual Studio adalah Integrated Development Environment (IDE) dari untuk membangun aplikasi console dan Graphical user interface (GUI) dengan menggunakan bahasa yang didukung pada .NET Framework.  Aplikasi GUI yang dapat dibangun diantaranya adalah: Windows Form, Website, Web Application, Windows Mobile.

Visual Studio selain mempunyai feature untuk:

1. Designer antarmuka untuk Winform, WPF dan Web.  Selain itu juga dapat digunakan untuk mendesign Class, Data dan Mapping.
2. Code editor dengan dukungan IntelliSense.
3. Debugger.

Visual Studio 2010 adalah IDE dengan multi target .NET Framework, artinya developer dapat membangun aplikasi dengan menggunakan .NET Framework 2.0, 3.0, 3.5 dan 4.0.

Membuat solution adalah langkah pertama yang dilakukan untuk membangun aplikasi. Dalam satu solution dapat lebih dari satu project.  Project yang terdapat pada satu solution dapat terdiri atas bermacam tipe aplikasi dan platform.

Artinya dalam satu solution bisaterdapat :

1. Windows.
2. Web.
3. Smart Device.
4. Office.
5. Dan lain-lain.

Dengan membuat Solution terlebih dahulu maka developer dapat membuat nama yang dapat mewakili seluruh project yang ada di dalam Solution tersebut.

Untuk memulianya, ikuti langkah-langkah berikut:

1. Jalankan Visual Studio 2010, lalu akan ditampilkan splash seperti gambar berikut, tunggu beberapa saat hingga muncul IDE yang lengkap.

2. Buatlah sebuah solution yang baru, yaitu dengan cara: File > New > Project

3. Pada jendela New Project, pilihkan Visual Studio Location, .NET Framework 4

Isikan Name: AplyFramework, Solution name: AplyFramework
Jangan lupa pilih sebuah folder tempat menyimpan proyek Anda, misalnya: D:\PKT2\

Lalu tekan tombol OK

Sebagai hasilnya, pada panel Solution Explorer akan terlihat sebuah solusi yang baru saja Anda buat, seperti gambar berikut:

Terlihat bahwa solution “AplyFramwork (0 project)” yang artinya belum ada proyek yang dibuat pada solution tersebut.

Sampai saat ini Anda telah berhasil membuat Solution. Mari kita lanjutkan dengan Membuat proyek baru pada solution tersebut.

Membuat Proyek Dengan WCF

Seperti telah dijelaskan, Solution digunakan untuk mengembangkan proyek yang terdiri dari banyak CLR, sehingga manajerial proyek akan lebih mudah dilakukan.

Selanjutnya, Anda akan membuat proyek di dalam Solution tersebut.

1. Pada Solution “AplyFramework”, klik kanan > Add > New Project.

2. Pada jendela Add New Project, piliah Other Language > Visual Basic, lalu .NET Framework 4, lalu WCF Service Application.

Isikan Name: AplyService, dan biarkan location secara default (dalam hal ini secara otomatis akan menjadi D:\PKT2\AplyFramework.

Lalu klik tombol OK

Sebagai hasilnya, akan dibuat sebuah proyek baru bernama “AplyService” seperti gambar berikut:

3. Secara default, IDE akan memberikan nama IService1.vb untuk service intervace, dan Service.svc untuk implementasi body program.

Anda dapat mengganti nama tersebut, agar lebih merepresentasikan proyek yang sedang dibuat (namun mengganti nama bukanlah sebuah keharusan).

Cara mengganti nama: IService1.vb > klik kanan > Rename lalu berikan nama baru yaitu AllService

Jika ada muncul peringatan seperti gambar berikut, maka klik tombol Yes.

Lakukan hal yang sama untuk file Service1.svc, sehingga hasilnya menjadi seperti gambar berikut:

4. Sekarang Anda siap untuk menghidupkan service tersebut. Caranya, pastikan bahwa Anda telah memilih Solution ‘AplyFramework’ caranya dengan melakukan klik.

Lalu, pada menu bar, klik tombol segitiga hijau untuk melakukan Run, dan Anda akan masuk ke runtime, seperti gambar berikut:

Sebagai hasilnya, web browser akan terbuka secara otomatis (pada contoh ini web browser menggunakan Firefox).

Lalu klik pada AllService.svc sehingga akan terbuka jendela rowser yang baru, seperti gambar berikut:

Perhatikan bahwa alamat web service yang bisa diakses (consume) adalah:http://localhost:3097/AllService.svc?wsdl

Untuk selanjutnya, alamat service tersebutlah yang akan diconsume oleh aplikasi lain, yang akan Anda coba pada bagian berikutnya masih pada tutorial ini.

5. Keluar dari run time, dengan cara melakukan klik pada tombol kotak biru seperti gambar berikut:

Hingga saat ini Anda telah berhasil membuat proyek untuk menyediakan service.

Lanjutkan ke bagian berikut untuk membuat aplikasi yang akan mengconsume web service tersebut. (dalam hal ini ini Anda akan memuat aplikasi desktop).

Membuat Aplikasi Desktop Yang Menggunakan Service

Service yang baru saja Anda buat pada tahap sebelumnya adalah berbasis web, sehingga dapat diakses lewat protocol htpp, maka disebut sebagai Web Service.

Service tersebut dapat diakses oleh berbagai aplikasi, misalkan oleh aplikasi desktop, aplikasi mobile, dan aplikasi web.

Sekarang untuk mencobanya, Anda akan membuat sebuah aplikasi web yang akan mengconsume service tersebut.

1. Pada solution yang sama, buatlah sebuah proyek baru yang berbasis desktop, caranya pada Solution ‘AplyFramework’ > klik kanan > Add > New Project

2. Lalu pada jendela Add New Project, pilih Other Language > Visual Basic, .NET Framework 4, Windows Form Application.

Lalu isikan Name: TesterApp dan location biarkan secara default (dalam contoh ini defaultnya adalah D:\PKT2\AplyFramework)

Lalu tekan tombol OK

Sebagai hasilnya, pada panel Solution Explorer akan dibuat sebuah proyek baru bernama TesterApp seperti gambar berikut:

3. Bukalah Windows Explorer dan perhatikan sudah terbentuk sebuah folder yang merupakan lokasi proyek TesterApp seperti gambar berikut:

4. Kembali ke Solution Explorer, pada TesterApp > Form1.vb > klik maka akan ditampilkan design editor pada bagian kanan.

Tempatkan 3 teks box dan 1 button, lalu aturlah sehingga menjadi seperti berikut:

5. Lalu Anda harus “menghubungkan” aplikasi desktop TesterApp dengan web service yang berada pada alamat http://localhost:3097/AllService.svc?wsdl

Caranya, TesterApp > klik kanan > Add Service Reference

Lalu akan ditamplkan jendela Add Service Reference, kemudian klik tombol Advanced

Lalu akan ditampilkan jendela Service Reference Setting, kemudian klik tombol Add Web Reference

6. Pada jendela Add Web Reference, aturlah parameter yang digunakan seperti gambar berikut:

Caranya:

a. Isikan URL dengan http://localhost:3097/AllService.svc?wsdl (1)
b. Klik icon panah (2), dan akan tampil loading bar (3)
c. Kemudian ditampilkan service dan method yang tersedia (4)
d. Isikan Web reference name: CallAplyService (5), sebenarnya bisa saja menggunakan nama berbeda
e. Tekan tombol Add Reference (6)

Sebagai hasil akhirnya adalah seperti gambar berikut ini:

Lanjutkan ke bagian berikut untuk membuat aplikasi yang akan mengconsume web service tersebut. (dalam hal ini ini Anda akan memuat aplikasi desktop).

Lakukan run (klik tombol segitiga hijau), untuk memastikan tidak ada program yang error.

Implementasi Source Code Untuk Penjumlahan Bilangan

Hingga saat ini Anda sudah berhasil membuat web service, membuat aplikasi desktop, dan menghubungkan web service dan aplikasi desktop tersebut.

Sekarang Anda akan melanjutkan menyedediakan event handler, sehingga pada saat tombol Tambah diklik, maka aplikasi desktop akan memanggil web service, dan web servie akan melakukan oprasi penjumlahan lalu mengembalikan hasil penjumlahan tersebut ke aplikasi desktop, dan akhirnya aplikasi desktop menampilkan hasil penjumlahan tersebut.

1. Modifikasi file AllService.vb sehingga menjadi seperti source code berikut:

‘ NOTE: You can use the "Rename" command on the context menu to change the interface name "IService1" in both code and config file together.
<ServiceContract()>
Public Interface IService1

<OperationContract()>
Function GetData(ByVal value As Integer) As String

<OperationContract()>
Function GetDataUsingDataContract(ByVal composite As CompositeType) As CompositeType

‘ TODO: Add your service operations here
<OperationContract()>
Function Tambah(ByVal param1 As String, ByVal param2 As String) As String

End Interface

‘ Use a data contract as illustrated in the sample below to add composite types to service operations.

<DataContract()>
Public Class CompositeType

<DataMember()>
Public Property BoolValue() As Boolean

<DataMember()>
Public Property StringValue() As String

End Class

Yang Anda modifikasi adalah menambahkan perintah berikut:

‘ TODO: Add your service operations here <OperationContract()>
Function Tambah(ByVal param1 As String, ByVal param2 As String) As String

2. Modifikasilah file AllService.svc.vb sehingga menjadi seperti source code berikut:

‘ NOTE: You can use the "Rename" command on the context menu to change the class name "Service1" in code, svc and config file together.
Public Class Service1
Implements IService1

Public Sub New()
End Sub

Public Function GetData(ByVal value As Integer) As String Implements IService1.GetData
    Return String.Format("You entered: {0}", value)
End Function

Public Function GetDataUsingDataContract(ByVal composite As CompositeType) As CompositeType Implements IService1.GetDataUsingDataContract
If composite Is Nothing Then
    Throw New ArgumentNullException("composite")
End If
If composite.BoolValue Then composite.StringValue &= "Suffix" End If Return composite End Function Public Function Tambah(ByVal param1 As String, ByVal param2 As String) As String Implements IService1.Tambah Return String.Format("{0}", Val(param1) + Val(param2)) End Function End Class

Yang Anda modifikasi adalah menambahkan perintah berikut:

Public Function Tambah(ByVal param1 As String, ByVal param2 As String) As String Implements IService1.Tambah
    Return String.Format("{0}", Val(param1) + Val(param2))
End Function

3. Modifikasilah file TesterApp>Form1.vb sehingga menjadi seperti source code berikut:

Public Class Form1

Dim cap As New CallAplyService.Service1
Private Sub btn_tambah_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btn_tambah.Click txt_hasil.Text() = cap.Tambah(txt_bilangan1.Text, txt_bilangan2.Text) End Sub
End Class

4. Setiap kali melakukan modifikasi pada web service maka Anda harus melakukan refresh proyek Anda caranya:
a. Pada Solution ‘AplyFramework’ > klik kanan > Rebuild Solution
b. Pada TesterApp > Web Reference > CallAplyService >

Catatan: Pastikan Anda melakukan langkah tersebut setiap kali melakukan modifikasi source code.

5. Jalankan proyek dengan cara klik tombol Run, dan pastikan bahwa service dapat dijalankan, yaitu hingga browser menampilkan gambar berikut:

6. Ujicoba hasilnya, buka Windows Explorer, lalu double klik file TesterApp seperti gambar berikut:

7. Pada aplikasi TesterApp lakukan entri data lalu tekan tombol Tambah seperti gambar berikut:

Tutorial ini disediakan oleh: Aplysit Corp – Untuk Indonesia yang lebih baik

Like or Share This Article




COMMENTS ( 0 )
./foto_users/small_no_avatar.jpg
Comment #1
kristian sibarani 10 Oktober 2016 (14:10:03)
Terimakasih atas tutorialnya,
Saya mau bertanya, kenapa web service saya tidak bisa dibuka ya?  Web service Saya ketika dijalankan selalu muncul Notifikasi "Unable to connect". Itu kenapa ya? Mohon Pencerahannya.

 
Keep connected with us, mobile apps available now !!