Spring MVC 3 – Ajax Menggunakan jQuery

SpringMvc-Ajax

Kalau berbicara mengenai teknologi web saat ini maka pembahasan tentang Ajax tidak akan luput dari perbincangan. Teknologi Ajax mengubah total user experience sebuah aplikasi web, yang tadinya kaku dalam arti harus reload page hanya untuk mengganti satu bagian kecil menjadi seperti sekarang yang luwes layaknya aplikasi desktop.

Pada kesempatan kali ini saya akan menunjukkan dasar aplikasi Ajax menggunakan Spring MVC 3 dan jQuery. jQuery menyediakan sebuah fungsi ajax yang sangat memudahkan kita dalam melakukan komunikasi asynchronous dengan server.

Contoh Aplikasi

Contoh aplikasi yang akan dikembangkan pada tutorial ini adalah aplikasi penjumlahan yang sangat sederhana. Terdapat dua buah text input dan sebuah tombol.

Pengguna memasukkan sebuah angka ke masing-masing text input. Ketika tombol ditekan data kedua nilai akan dikirimkan ke server melalui jQuery dengan komunikasi Ajax. Setelah data diterima pada server maka kedua nilai tersebut dijumlahkan dan hasil penjumlahan akan dikembalikan ke jQuery untuk kemudian ditampilkan pada halaman web. Ingat, semua proses tersebut dilakukan tanpa adanya reload atau refresh halaman !. Sesuatu yang sangat keren 😀
preview

Library yang Dibutuhkan

Beberapa library yang perlu ditambahkan pada project kita dapat dilihat pada file [rad-hl]pom.xml[/rad-hl] sebagai berikut

file : pom.xml

Pada bagian yang saya highlight merupakan library yang digunakan untuk mengubah output nilai menjadi format JSON. Mengapa JSON?, karena format inilah yang digunakan sebagai pertukaran data dari server.

Konfigurasi

Jangan capek berkutat dengan konfigurasi di Java karena inilah yang membuat Java powerful. Capek sedikit diawal tidak masalah.
Kode berikut ini merupakan kelas java yang digunakan sebagai konfigurasi.

file:src/main/java/com/agungsetiawan/srpingjquery/config/WebAppConfig.java

Method yang saya highlight digunakan untuk meload file static diantaranya JavaScript, gambar dll seperti yang pernah saya tulis disini. Kelas konfigurasi kita merupakan turunan dari [rad-hl]WebMvcConfigurerAdapter[/rad-hl] agar bisa menggunakan method tadi.

Membuat Service

Service mewakili kerja apa yang bisa dilakukan oleh aplikasi. Karena aplikasi contoh pada tulisan ini adalah aplikasi penjumlahan 2 bilangan maka tugas tersebut ada pada service ini.
Berikut merupakan kode dari kelas yang bertugas sebagai service.

file : src/main/java/com/agungsetiawan/service/AritmethicService.java

Kode yang sangat sederhana.

Halaman Web

Halaman ini yang bertugas menjadi User Interface. Bagian yang saya highlight adalah kode JavaScript jQuery yang mengirim nilai pada kedua input text ke server.
Ada beberapa hal yang perlu saya jelaskan
type:”post”, maksudnya kita mengirimkan data nilai pada kedua text input menggunakan method post
dataType:”json”, format pertukaran data yang digunakan adalah json
url:”add”, url server yang akan memproses kedua nilai inputan
data:”paramOne=”+paramOne+”&paramTwo=”+paramTwo, data yang dikirim ke server
success:function(), fungsi yang dijalankan ketika proses ajax berhasil
error:function(), fungsi yang dijalankan ketika proses ajax gagal

Membuat Controller

Mungkin ada yang bertanya, url pada jQuery diatas yakni “add” didapat dari mana?. Jawabannya adalah didapat dari url method pada Controller ini.

file : src/main/java/com/agungsetiawan/springjquery/controller/AritmethicController.java

Hasil penjumlahan diubah kedalam bentuk String dan kemudian dibuah menjadi format JSON melalui annotation [rad-hl]@ResponseBody[/rad-hl]. Setelah itu nilai kembalian tersebut diberikan kepada jQuery untuk ditampilkan hasilnya melalui function [rad-hl]success()[/rad-hl].

Screenshot

Berikut ini adalah screenshot contoh program ketika dijalankan

default

penjumlahan

Source Code

Source Code aplikasi sederhana ajax ini bisa didownload pada Github saya disini

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

6 thoughts on “Spring MVC 3 – Ajax Menggunakan jQuery

  1. konsep MVC dengan pure php beserta contoh untuk membuat sebuah halaman sederhana nggak ada ya mas? cari kesana-kemari rata-rata tutorialnya page framework (cake, CI, dsbgny) mohon tanggapannya 🙂

    1. iya, dulu saya coba mvc di php pure tanpa framework gak nemu solusi yang gampang, ada beberapa tutorial tapi kita harus bikin library sendiri yang lumayan njlimet

      kalau di Java bisa pure tanpa framework 🙂

      1. wah, gitu to mas? hadeeh, kalau saya pribadi susah ngikutin pattern orang, susah mahaminnya, o iya, sebenernya dari segi kecepatan, mana yang cepat menggunakan pure atau yg mvc ini mas?

        1. didunia kerja malah kita dituntut untuk bisa memahami kode orang, gak semua kerjaan kita mulai dari awal, kadang ada yang namanya project “warisan”

          saya belum pernah mengukurnya, waktu itu pernah baca orang yang ngukur antara asp.net dengan asp.net mvc malah lebih cepet yang bukan mvc

          tapi mvc sendiri kan memiliki keuntungan 😉

          1. separation of concern salah satunya, tiap bagian punya tugas masing-masing jadi tidak campur aduk semrawut,
            dengan begitu kode lebih mudah dibaca mata telanjang dan mudah saat maintenance

Leave a Reply

Your email address will not be published. Required fields are marked *