Input, Update, Delete Using Javascript And WebService (Part 1 of 2)
Sample Input, Update, Delete Using Javascript And WebService (Part 1 of 2) Web Service yang saya buat menerima parameter dan mengembalikan nilai dalam format XML. Web Service tersebut akan dikonsumsi oleh Javascript untuk ditampilkan di Browser untuk proses input, edit, dan delete. Alasannya mengapa kita menggunakan Javascript, adalah karena karena kita akan menggunakan teknik AJAX yang terkenal karena dalam proses update halaman web tanpa mereload keseluruhan isi halaman sehingga akan meghemat bandwith dan mempercepat proses rendering karena hanya merubah bagian tertentu dari halaman web yang merupakan susunan HTML.
Sebelum melangkah lebih jauh, baiklah kita cari tahu dulu tentang apa itu Web Service, Javascript, dan XML. Berikut ini adalah link-link yang bisa teman-teman klik mengenai definisi istilah diatas : Web Service, Javascript, dan XML
Dalam contoh ini, penulis menggunakan DB SQLServer dan Visual Web Developer 2005 Express Edition.
Dibawah ini adalah nama DB dan struktur tabelnya, kita buat sesederhana mungkin.
Berikut ini adalah gambar struktur DB nya :
Sedangkan hasil dari Web Service nya akan terlihat seperti dibawah ini, yang berjalan dalam mode Development Server :
Dibawah ini adalah hasil dari Service View setelah kita menekan tombol invoke dari link service ViewData, terlihat bahwa format yang dihasilkan adalah dalam bentuk XML.
Untuk menguji apakah service InsertData dapat melakukan input data, klik link InsertData kemudian muncul halaman web baru dan ketikkan parameternya yang berupa kode dan nama barang, seperti terlihat dibawah ini :
setelah memasukkan parameter kemudian lanjutkan dengan menekan tombol invoke dan periksa apakah database anda telah terisi. Jika telah terisi, itu berarti service input data telah berjalan dengan baik.
Setelah melihat gambar-gambar diatas, kita lanjutkan dengan melihat isi kode dari WebService tersebut.
Berikut ini adalah package yang perlu kita import
Berikut ini adalah nama kelas service
Berikut ini adalah fungsi untuk view data
Berikut ini adalah fungsi untuk insert data
Berikut ini adalah fungsi untuk update data
Berikut ini adalah fungssi untuk delete data
Gambar yang terakhir adalah kelas untuk menampung field-field tabel MBARANG
Pembahasan memgenai cara mengkonsumsi Web Service melalui Javascript untuk teknik AJAX akan ada insyaAllah pada postingan berikutnya.
Recommended Reading:
Input, Update, Delete memanfaatkan Javascript dan WebService (Part 2 of 2)
Semoga posting artikel Input, Update, Delete Using Javascript And WebService (Part 1 of 2) diatas dapat bermanfaat.
Salam,
Sebelum melangkah lebih jauh, baiklah kita cari tahu dulu tentang apa itu Web Service, Javascript, dan XML. Berikut ini adalah link-link yang bisa teman-teman klik mengenai definisi istilah diatas : Web Service, Javascript, dan XML
Dalam contoh ini, penulis menggunakan DB SQLServer dan Visual Web Developer 2005 Express Edition.
Dibawah ini adalah nama DB dan struktur tabelnya, kita buat sesederhana mungkin.
Berikut ini adalah gambar struktur DB nya :
Sedangkan hasil dari Web Service nya akan terlihat seperti dibawah ini, yang berjalan dalam mode Development Server :
Dibawah ini adalah hasil dari Service View setelah kita menekan tombol invoke dari link service ViewData, terlihat bahwa format yang dihasilkan adalah dalam bentuk XML.
Untuk menguji apakah service InsertData dapat melakukan input data, klik link InsertData kemudian muncul halaman web baru dan ketikkan parameternya yang berupa kode dan nama barang, seperti terlihat dibawah ini :
setelah memasukkan parameter kemudian lanjutkan dengan menekan tombol invoke dan periksa apakah database anda telah terisi. Jika telah terisi, itu berarti service input data telah berjalan dengan baik.
Setelah melihat gambar-gambar diatas, kita lanjutkan dengan melihat isi kode dari WebService tersebut.
Berikut ini adalah package yang perlu kita import
Berikut ini adalah nama kelas service
Berikut ini adalah fungsi untuk view data
Berikut ini adalah fungsi untuk insert data
Berikut ini adalah fungsi untuk update data
Berikut ini adalah fungssi untuk delete data
Gambar yang terakhir adalah kelas untuk menampung field-field tabel MBARANG
Pembahasan memgenai cara mengkonsumsi Web Service melalui Javascript untuk teknik AJAX akan ada insyaAllah pada postingan berikutnya.
Recommended Reading:
Input, Update, Delete memanfaatkan Javascript dan WebService (Part 2 of 2)
Semoga posting artikel Input, Update, Delete Using Javascript And WebService (Part 1 of 2) diatas dapat bermanfaat.
Salam,
