Asmx Web Service in ASP.NET

Pada posting sebelumnya saya membahas Web Service dengan XML. Pada posting kali ini saya akan memberikan sample untuk Web Service dengan JSON. Kita mulai dari apakah JSON itu? JSON (JavaScript Object Notation), untuk mengetahui apa sebenarnya JSON, kita akan cek di  Wikipedia.

JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi.

Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.

Atau jika anda ingin mengetahui lebih rinci mengenai skema JSON, teman bisa berkunjung ke : www.json.org

Berikut ini adalah contoh format notasi JSON :{"namaDepan": "Ini","namaBelakang": "Contoh"}

Dari contoh tersebut dapat dilihat bahwa notasi JSON adalah merupakan array yang berisi dengan notasi beserta isi datanya, hampir mirip dengan format XML, bedanya dengan format XML adalah karena format XML data diapit oleh tag XML.

Yang perlu diingat ialah bahwa kita dapat melewatkan parameter menggunakan objek berupa JSON pada Web Service dan bukan hanya tipe data primitif.

Kalau pada posting sebelumnya saya menggunakan Visual Web Developer Express Edition 2005 untuk menuliskan contoh programnya, pada contoh kali ini saya menggunakan Visual Web Developer Express Edition 2010 Beta 2. Teman-teman dapat mendownloadnya di : Download Visual Web Developer Express Edition 2010 Beta 2.

Oke, kita lanjut lagi bahasan tentang JSON.

Pada sample program kali ini, selain Web Service dan file HTML untuk menampilkan hasil dari WS, kita juga memerlukan 1 buah file "jquery.js". Pertanyaannya adalah mengapa memerlukan file ini? Jawabannya adalah karena jquery.js berisi kumpulan function yang kita perlukan untuk melakukan parsing terhadap JSON yang dihasilkan oleh WS sehingga dapat meghasilkan notasi yang berbentuk array yang dapat lebih mudah kita gunakan. File jquery.js sudah saya ikutkan dalam projek ini atau teman bisa cari di Google untuk mencari file jquery.js tersebut. Tapi jika teman ingin membuat parser sendiri untuk membaca data JSON dari Web Service itu juga dapat teman lakukan, cuma mungkin agak rumit dan memerlukan usaha yang lebih.

Kita lanjutkan pada coding programnya, berikut ini adalah sebagian tampilannya :

Dibawah ini adalah tampilan package yang perlu kita impor beserta nama kelas servicenya.

Asmx Web Service in ASP.NET
Figure 1


Berikut ini adalah tampilan fungsi untuk melakukan retrieve data.

Asmx Web Service in ASP.NET
Figure 2

Di fungsi retrieve tersebut saya menggunakan

ConfigurationManager.ConnectionStrings("DBConnect").ConnectionString()

DBConnect adalah nama connectionstring yang terdapat di Web.Config.
Database yang saya gunakan sama dengan Database pada postingan saya sebelumnya, sesuaikan juga user dan password akses untuk database di SQL Server yang teman miliki.

Berikut ini adalah kelas yang dibutuhkan untuk menampung data.


Figure 3


Berikut ini adalah penggunaan jquery.js untuk menampilkan data JSON dari Web Service.

Asmx Web Service in ASP.NET
Figure 4

Agar jquery.js dapat dipergunakan, sebelumnya referensikan script jquery.js di tag header HTML.

Setelah itu kita akan membahas code, berikut ini adalah tampilan di browser saat kita melakukan retrieve data dari Web Service.


Asmx Web Service in ASP.NET
Figure 5


Asmx Web Service in ASP.NET
Figure 6


Figure 1 adalah saat page melakukan load pertama kali. Gambar 2 adalah saat tombol retrieve diklik. Saat tombol retrieve diklik maka javascript akan melakukan rendering. Proses rendering akan lebih cepat dari pada kita melakukan post back 1 halaman penuh karena Javascript hanya akan melakukan perubahan di elemen tertentu dari halaman web.

Di figure 2 juga terlihat 2 buah kotak, kotak atas merupakan data yang telah dikombinasikan dengan tabel HTML dan kotak bawah merupakan JSON yang telah diparser dengan menggunakan jquery.js, disitu terlihat data lebih ringkas daripada XML.

Sample program ini hanya memberikan contoh untuk melakukan retrieve data. Jika Anda ingin melakukan insert, update, dan delete data. Anda bisa melihat pada posting saya sebelumnya dan dikombinasikan dengan posting ini.

Recommended Reading:
JSON Web Service Sample

Semoga postingan Asmx Web Service in ASP.NET diatas dapat bermanfaat.



Salam,

Popular posts from this blog

SmartObject property ID is a required property for selected method Create. Value must be set.

Cara inject USB 3.0 Driver pada instalasi Windows - How to Inject USB 3.0 Driver in Windows 7

Python Font Color in Console