Input, Update, Delete Using Javascript And WebService (Part 1 of 2)

By -
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 :

Input, Update, Delete using Javascript and WebService

Sedangkan hasil dari Web Service nya akan terlihat seperti dibawah ini, yang berjalan dalam mode Development Server :

Input, Update, Delete using Javascript and WebService

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.

Input, Update, Delete using Javascript and WebService

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 :

Input, Update, Delete using Javascript and WebService

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

Input, Update, Delete using Javascript and WebService

Berikut ini adalah nama kelas service

Input, Update, Delete using Javascript and WebService

Berikut ini adalah fungsi untuk view data

Input, Update, Delete using Javascript and WebService

Berikut ini adalah fungsi untuk insert data

Input, Update, Delete using Javascript and WebService

Berikut ini adalah fungsi untuk update data

Input, Update, Delete using Javascript and WebService

Berikut ini adalah fungssi untuk delete data

Input, Update, Delete using Javascript and WebService

Gambar yang terakhir adalah kelas untuk menampung field-field tabel MBARANG

Input, Update, Delete using Javascript and WebService

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,

Popular posts from this blog

K2 Error Value Cannot Be Null. Parameter Name: s In SmartView and SmartObject

By -
Jika kamu pernah menemukan error " K2 Designer Error Value Cannot Be Null.  Parameter Name: s " pada saat melakukan execute SmartObject atau pada saat membuka SmartObject maupun SmartView . Biasanya error tersebut terjadi setelah kita melakukan Deploy menggunakan pilihan create new SmartObject tetapi kita lupa untuk menambahkan Stored Procedure pada database dan SmartObject terlanjur terbuat tetapi tidak merefer ke Stored Procedure manapun. Setelah kita tambahkan Stored Procedure  dan melakukan Deploy ulang tetapi rror diatas masih terjadi, maka refresh Database instance melalui K2SmartObject tester agar Stored Procedure  yang baru kita tambahkan dikenal oleh K2. Semoga posting tentang " K2 Error Value Cannot Be Null.  Parameter Name: s " diatas dapat bermanfaat. Salam,
Read more

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

By -
Image
Beberapa laptop belakangan ini sudah menggunakan USB 3.0 daripada USB 2.0. Namun kebanyakan versi windows yang ada adalah menggunakan driver USB 2.0 sehingga saat instalasi akan diminta driver USB 3.0 sebelum melakukan partisi hardisk. Tanpa itu, tidak bisa melanjutkan instalasi. Berikut adalah cara untuk inject driver USB 3.0 ke file installer Windows yang sudah kalian punya. Sebelum melakukan injeksi, terlebih dahulu download driver USB 3.0 sesuai dengan merk dan tipe laptop yang ada. Jika ragu dengan merk laptop, bisa download driver USB 3.0 sebanyak mungkin. Create folder pada tempat yang mudah di akses, hal ini dilakukan untuk mempercepat proses dan mempunyai copy file jika gagal (misalnya C:\ubs3) Create folder mount di dalam folder yang sudah dibuat tadi Extract driver ke folder di dalamnya (misal C:\usb3\driver) Selanjutnya, kita perlu file yang digunakan untuk menginject driver ke dalamnya. Masuk ke Flashdisk dan copy file boot.wim dan install.wim ke folder y...
Read more

Pentaho Spoon Error : "Could Not Create The Java Virtual Machine"

By -
Image
Apakah Anda salah satu pengguna Pentaho? Jika Anda menginginkan software gratis untuk melakukan integrasi data maka Pentaho adalah salah satu pilihan yang dapat dijadikan acuan. Selain itu Pentaho juga tersedia dalam sistem operasi Windows maupun Linux. Untuk menjalankan Pentaho kita tidak perlu melakukan instalasi melainkan cukup dengan menjalankan file spoon.bat . Namun seringkali terjadi error  saat menjalankan Pentaho, yang umum terjadi adalah belum adanya instalasi Java di komputer. Java diperlukan karena Pentaho memerlukan JRE milik Java agar aplikasi Pentaho dapat berjalan. Jika JAVA telah diinstal tetapi masih muncul pesan error " Could Not Create The Java Virtual Machine " maka edit file spoon.bat dan cari bagian Pentaho Java Options. Seperti terlihat pada settingan di bawah ini. if "%PENTAHO_DI_JAVA_OPTIONS%"=="" set PENTAHO_DI_JAVA_OPTIONS="-Xmx8192m" "-XX:MaxPermSize=2048m" Ubahlah baris script diatas menjad...
Read more