BOOK Wiranto Herry Utomo Integrasi Data dengan Web Service BAB IV

BAB 4

Membangun Web Services

Pada bagian ini akan dilakukan tahapan pembuatan web services yang dimulai dengan membuat aplikasi kelas java, membuat user interface, membuat web service, dan terakhir adalah membuat klien web service berbasis browser (Barrett, 2009).

4.1 Membangun Aplikasi Kelas Java

Pada proyek ini akan dibuat aplikasi Java yang sederhana yaitu HelloWord. Aplikasi ini mempunyai sebuah kelas POJO. Method greet() akan mengambil nama orang sebagai input dan membangkitkan ucapan (greeting) yang didasarkan pada waktu dan bulan.

4.1.1 Membuat Project Java

Semua file yang dibuat dalam proyek ini akan disimpan dalam folder proyek yang terpisah. Langkah-langkah dalam membuat Project Java adalah sebagai berikut :

2.

Untuk Categories, pilih Java

3.

Untuk Projects, pilih Java Application

4.

Klik Next. Wizard New Java Application akan muncul.

5.

Untuk Project Name, ketik GreeterJavaProject

6.

Untuk Project Location, ketik C:\MyHelloNetBeans Jika direktori tidak ada, maka akan dibuatkan secara otomatis oleh Netbeans.

7.

Klik Finish. Wizard akan menutup dan akan terlihat GreeterJavaProject ditambahkan ke panel Properties di sisi kiri.

{POJO merupakan singkatan dari “plain old Java object.” Untuk membuat project java ini server GlassFish harus sudah running, dengan memilih menu Start All Programs atau jalankan program start_netbeans.bat dari direktori Glassfish terinstall, misalnya C:\GlassFishESBv21}

4.1.2 Membuat Kelas Java

1.

Klik kanan pada node GreeterJavaProject di panel Projects dan pilih New / Java Class. Wizard window New Java Class akan muncul.

2.

Untuk Class Name, ketik Greeter

3.

Untuk Package, ketik greeting

4.

Klik Finish. Wizard window akan tertutup, dan kelas Greeter.java akan ditambahkan ke hirarki panel proyek dan

editor Java akan terbuka.

Kelas Greeter mempunyai kemampuan untuk mengirim ucapan selamat (greeting). Berikutnya adalah membuat method tunggal yang dinamakan greet().

Sebelum method greet() diperluas, dapat dilihat fungsi yang dijalankan method ini. Dengan method ini akan diambil nama orang (seperti Joe) sebagai input dan akan memunculkan sebuah ucapan seperti berikut :

“Hello, Joe. Have a great afternoon. Time goes fast. We are already in month 5 of the year!”

Ini merupakan ucapan yang diatur, karena melibatkan nama orang yang di-passing sebagai nilai parameter input yang dinamai nama. Ini juga diatur karena greeter akan melibatkan “great morning,” “great afternoon,” or “great evening” yang didasarkan pada waktu kini. Juga, jumlah bulan (5 dalam contoh) secara tepat direfleksikan dalam pesan.

Upaya-upaya Booch, Rumbaugh dan Jacobson menghasilkan keluaran UML 0.9 di bulan Juni 1996 dan UML 0.91 di bulan Oktober 1996. Selama tahun 1996, penulis UML mengundang dan menerima feedback dari masyarakat umum. Mereka menggabungkan umpan balik ini, tetapi jelas bahwa masih diperlukan tambahan perhatian.

Untuk menyelesaikan hal ini, tambahkan kode di dalam method greet() sehingga ini dapat menetapkan waktu kini dan menetapkan

Kode di kopi dan paste diatas dari statemen “return “”;” : // Get current calendar that access current date/time

Calendar myCalendar = Calendar.getInstance();

// Determine the current hour

int hour = myCalendar.get(Calendar.HOUR_OF_DAY);

// Determine part of day String partOfDay = null; if (hour < 12) {

partOfDay = "morning"; } else if (hour > 18) {

partOfDay = "evening"; } else {

Gunakan shortcut Alt-Shift-F melakukan indent kode secara benar. Indent secara manual dilakukan dengan memberikan tanda comment lines yang dimulai dengan “//”. Gunakan kunci Tab untuk indent.

{Calendar merupakan kelas Java yang berisi tanggal terkini dan informasi waktu. Ketika method getInstance() dipanggil, maka akana dimunculkan tanggal system terkini dan waktu yang disimpan dalam objek myCalendar. Objek jam Calendar dapat diekstraksi dengan method get().

Sekali dipanggil jam, maka lojik kondisional dapat diputuskan untuk hal seperti sebelum tengah hari, antara tengah hari dan jam 6 sore, dan setelah jam 6 sore. Dapat pula dipanggil variable string partOfDay.}

4.1.4 Mengimpor Reference

Dapat dilihat bahwa tanda merah pada gelembung kuning di sisi kiri menunjukkan adanya masalah.

Pilih Add import for java.util.Calendar. Ingat bahwa statemen import java.util.Calendar; ditambahkan ke bagian atas program dan

semua tanda merah dan kuning akan menghilang. Kode secara sintak telah diperbaiki.

{Masalahnya adalah Netbeans tidak dapat menemukan kelas Calendar yang diacu (reference). Namun, ada saran dimana tempat menemukan. Ketika menerima saran, tambahkan statemen import pada kode.}

Kode hasil kopi dan paste seperti ini : // Determine the current month

int month = myCalendar.get(Calendar.MONTH);

Juga dapat digunakan Alt-Shift-F untuk mempercantik tampilan.

Sekarang method greet() dapat diakhir dengan menambahkan lojik untuk membangun message untuk return. Ingat bahwa lojik ditambahkan pada akhir method dan statement asli return telah diganti dengan yang baru:

// Create greeting

String greeting = "Hello, " + name + " Have a great " + partOfDay; greeting += ". Time goes fast. We are already in month " + month; greeting += " of the year!";

System.out.println("Greeting is: " + greeting); return greeting;

Disini pada bagian bawah method tampak :

{Disini kode untuk untuk kecocokan cutting dan pasting.

Ini tampak lucu dengan menggunakan operator “+” pada se kumpulan kata-kata. Ini merupakan cara cepat untuk menggabungkan sekelompok kata-kata untuk membuat kalimat. Ingat bahwa nilai yang disisipkan untuk variable partOfDay dan month yang digabungkan.

Ingat bagaimana editor Java akan memberi tanda warna pada statemen, untuk kata cadangan akan berwarna biru, dan variable string akan berwarna hijau. }

4.1.5 Menguji Kelas Java

Untuk menguji method greet() diperlukan tambahan pada method main seperti dibawah ini. Tambahkan kode disisi kanan seteleh baris public class “Greeter {“ :

public static void main(String[] args) { Greeter greeter = new Greeter(); greeter.greet("Mickey Mouse");

}

Disini merupakan tambahan pada bagian atas kelas Greeter :

Untuk menguji kelas, perlu menjalankan method main(). Sehingga klik pada kepala panah warna hijau pada bagian atas window.

Hasilnya terlihat seperti ini:

Dari hasil terlihat masih ada masalah yaitu tidak ada message dari Mickey Mouse.

Kelas Main menjadi “Main Class” yang berjalan secara default, kapanpun menggunakan chevron hijau. Lakukan (Run Main Project) untuk project ini.

Kemudian dijalankan Main dulu, setelah itu baru dijalankan Greeter. Ini merupakan kerangka kode kosong di dalam kelas Main.

Kemudian jalankan kode Greeter. Untuk memperbaiki adanya error, lakukan klik kanan pada GreeterJavaProject pada panel Projects dan pilih Properties.

Seperti tampak pada gambar di bawah, pilih kategori Run dan pada field Main Class gunakan tombol Browse untuk memilih Greeter sebagai Main Class:

Gunakan ikon chevron hijau lagai untuk melakukan pengujian dan akan diketahui luaran di panel Output seperti berikut ini :

Greeting is: Hello, Mickey Mouse Have a great afternoon. Time goes fast. We are already in month 8 of the year!

Tetapi ternyata masih ada bug. Sekarang akan dicoba untuk menemukan bug tersebut dan memperbaikinya. Untuk memperbaiki bug maka akan digunakan debugger melalui langkah-langkah yang hati-hati dalam melakukan eksekusi dari method greet():

Pada editor Java, temukan pada baris:

Calendar myCalendar = Calendar.getInstance();

Pada margin di sisi kiri baris kode, klik sekali untuk menandai breakpoint. Maka baris kode akan disorot warna merah:

{Bukankah bulannya masih terlihat keliru?

Masalah ini dapat ditemukan tanpa menggunakan debugger, tetapi hal ini akan memberi peluang untuk melakukan eksplorasi debugging.

Lakukan eksekusi dengan debugger dengan melakukan klik pada ikon Debug Main Project pada bagian atas editor.

Akan terlihat eksekusi terhenti pada breakpoint dan baris kode disorot warna hijau:

{Jika panel Local Variables tidak terlihat, maka pilih Windows / Debugging / Local Variables untuk menampilkannya.

“Step Over” memungkinkan untuk berpindah eksekusi ke depan ke baris berikutnya. Eksekusi akan terhenti lagi dan akan terlihat lagi seputar variabel.}

Temukan panel Local Variables pada bagian bawah jendela. Ingat bahwa variable name sekarang mempunyai nilai “Mickey Mouse”.

Temukan kendali debugger pada bagian atas jendela dan klik sekali pada ikon Step Over:

Klik Step Over lagi dan lihat pada panel Local Variables untuk melihat nilai dari variable hour.

Dapat dilihat nilai pada panel Local Variables berubah ketika berpindah ke kode time. Variabel partOfDay akan diatur berdasarkan aliran melalui statemen if/else.

Lakukan klik Step Over sampai ke baris kode berikut: int month = myCalendar.get(Calendar.MONTH);

Lompati kode int month =

myCalendar.get(Calendar.MONTH); dan lihat nilai untuk variable

month variable seperti tampak pada panel Local Variables.

Akhirnya ditemukan nilai month yang salah. Jika ini February, maka month bernilai 2, bukan 1.

Klik kendali debugger Continue untuk mengakhiri sesi debugging.

Seperti sebelumnya, akan tampak tampilan greeting pada panel Output mengikuti baris kode:

Sehingga, apa masih ada yang salah dengan baris kode ini?: int month = myCalendar.get(Calendar.MONTH);

Sekarang gunakan built-in code dan dokumentasi untuk menhawab masalah ini.

4.1.7 Melengkapi Kode

{“Code completion” merupakan fitur IDE standard yang akan secara otomatis membantu dalam melengkapi staemen kode. Pada kasus ini, editor mengetahui myCalendar sebagai instantiasi dari kelas Calendar sehingga code completion menunjukkan atribut dan method yang tersedia.}

Letakkan posisi kursor pada editor di bagian akhir dari baris int month = myCalendar.get(Calendar.MONTH) dan tekan Enter untuk memulai baris baru. Kemudian ketikkan: myCalendar

Seperti yang ditunjukkan diatas, lakukan scroll down pada atribut MONTH dan klik pada atribut itu. Dokumentasi pada display diatas berubah. Ingat bagaimana MONTH didefinisikan:

Penjelasan ini merupakan masalahnya. Method memberikan

return nilai kurang dari yang diinginkan:

myCalendar.get(Calendar.MONTH)

Perbaikannya cukup sederhana yaitu menambah nilai 1 pada return get(), sehingga cukup lakukan edit pada baris ini:

int month = myCalendar.get(Calendar.MONTH);

menjadi:

int month = myCalendar.get(Calendar.MONTH) + 1;

Juga hapus kode pada myCalendar. Lakukan Save All.

Lakukan test ulang pada kelas Greeter dengan melakukan klik pada ikon Run Main Project.

Lihat pada panel Output panel, angka month sudah terlihat benar:

{NetBeans memanfaatkan utility Ant untuk melakukan mempunyai field entry data untuk menginput nama user dan tombol Greet yang akan meminta method greet() untuk membuat dan

menampilkan greeting yang telah dikustomisasi. User interface yang dibangun ini pada proyek yang sama seperti yang digunakan pada melakukan klik-kanan pada GreeterJavaProject pada panel Projects dan pilih New / JFrame Form. Jendela wizard New JFrame Form akan muncul.

Klik Finish dan akan terlihat file GreeterUI.java ditambahkan ke hirarki proyek. Kanvas design akan muncul. Akan ditambahkan widget user interface di kanvas ini.

Drag dan drop komponen Label dari bagian Swing Controls dari panel Palette ke kanvas. Label (jLabel1) akan ditambahkan ke layout. Klik-double pada widget dan ubah teks label menjadi Name:

{Jika panel Palette tidak tampak, gunakan pilihan menu bar Window / Palette untuk menampilkannya. Pada saat melakukan drag objek palette ke kanvas, kode Java untuk komponen trsebut secara otomatis akan di-generated.}

Drag komponenText Field dari bagian Swing Controls dari panel Palette ke kanvas. Drop di sebelah kanan dari label Name. Text field (jTextField1) akan ditambahkan.

Klik pada widget jTextField1 dan terlihat panel Properties menunjukkan nilai terkini. Hapus nilai pada property Text karena tidak dibutuhkan.

Klik pada control Code pada panel Properties dan ubah property Variable Name dari text field dari jTextField1 menjadi nameTextField

{ Jika panel Palette tidak tampak, gunakan pilihan menu bar Window / Palette untuk menampilkannya.

Jika tanpa sengaja melakukan klik-double pada jTextField1, maka akan masuk ke view Source. Lakukan klik ke kendali Design pada pojok kiri atas dari editor untuk kembali lagi ke mode Design.

Klik pada kontrol Properties pada panel Properties. Untuk text field ubah nilai property columns menjadi : 30.

{Ini akan mengatur panjang text field yaitu 30 characters. Widget pada kanvas juga akan seketika mengikuti.}

Drag widget Button ke dalam kanvas dan di dalam jendela Properties dan drop dibawah text field. Ubah property text dari jButton1

menjadi : Greet Ini akan merubah label button pada kanavas.

{Jika tanpa sengaja melakukan klik-double pada tombol Greet maka akan berubah ke mode Source. Klik kendali Design untuk kembali ke mode Design }

Dan akhirnya, drag widget Text Field dibawah button sehingga dapat ditampilkan greeting yang dihasilkan.

Klik pada control Code dan ubah property Variable Name dari text field dari jTextField1 menjadi: greetingTextField .

{Sekarang, nama text field lebih mempunyai arti dalam kode Java.}

Kembali ke area Properties untuk text field, dan ubah nilai property columns menjadi 50.

{Halini memberikan ruang yang lebih longgar untuk greeting yang akan dihasilkan.}

Atur ulang layout sehingga tampak seperti ini:

4.2.2 Menambah Event Handler Behavior

Klik-double pada button Greet untuk masuk ke mode Source. Akan terlihat bahwa editor Java ditampilkan dan kursor diposisikan di dalam button's handler bernama jButton1ActionPerformed.

{ “button handler” merupakan sebuah event handler yang akan memerangkap klik mouse, misalnya, serta menyediakan lojik yang akan diminta.}

Gantikan teks placeholder ( // TODO add your handling code here:) dengan kode berikut ini:

String name = (String) nameTextField.getText(); Greeter myGreeter = new Greeter(); sehingga baris indent akan tampak menarik, sehingga kode lebih dapat dibaca dan lebih mudah untuk di debug.}

Ada beberapa error yang ditunjukkan oleh ikon kuning dan merah pada margin kiri dari editor.

Klik bolam (pentol) kuning pada gambar dibawah dan pilih Add import for greeting.Greeter :

Statemen import ditambahkan pada bagian atas dari kelas GreeterUI dan semua tanda error lenyap.

Lakukan penyimpanan dengan Save All.

Klik-kanan pada GreeterJavaProject dan pilih Clean and Build option untuk kompilasi dua kelas (Greeter dan GreeterUI).

Perhatikan panel Output untuk mengecek pesan error.

{Clean and Build berarti menghapuskan bebera kode dan menampilkan kompilasi lagi.}

Sekarang kelas GreeterUI telah ditambahkan pada

GreeterJavaProject, GreeterUI (bukanGreeter) seharusnya menjadi

kelas main pada proyek. Seperti yang telah dijelaskan, kelas main merupakan kelas yang secara otomatis diawali ketika proyek running.

Karena itu lebih baik gunakan pilihan Build saja, daripada Clean and Build.}

Sekarang akan diubah Main Class untuk GreeterJava Project dari Greeter menjadi GreeterUI.

Klik-kanan GreeterJavaProject pada panel Projects dan pilih Properties. Jendela Project Properties akan ditampilkan.

Klik node Run pada hirarki di sebelah kiri untuk menampilkan rincian cara proyek ini akan dieksekusi.

Temukan field kelas Main, klik pada button Browse dan pilih kelas ui.GreeterUI. Klik button Select Main Class dan klik OK. Sekarang, ketika proyek running, maka GreeterUI yang akan dieksekusi pertama kali.

{“ui” merupakan nama paket yang ditetapkan ketika membuat kelas GreeterUI.}

Klik Ok untuk mengabaikan jendela Project Properties window. Lalu lakukan save all lagi jika diperlukan.

4.2.3 Menguji Java User Interface

Klik pada ikon Run Main Project (chevron hijau) pada bagian atas jendela.

Baru saja dibuat Java user interface yang berkolaborasi dengan kelas Greeter untuk menampilkan greeting yang dikustomisasi.

Tutup jendela greeting dengan klik pada X merah di sisi kanan atas.

Selanjutnya akan dibuat dan ditest web service yang mengekspose Greeter ke klient non-Java (seperti klien SOAP).

{Dengan kata lain, Greeter POJO akan dibungkus dengan sebuah web service. POJO adalah singaktan dari “Plain Old Java Object.”}

4.3 Membangun Web Service

kelas Greeter hanya dapat diakses melalui client Java yang berjalan pada mesin JVM yang sama.

Yang dibutuhkan adalah Greeter yang tersedia untuk berbagai client yang berjalan di manapun. Untuk kebutuhan tersebut, telah ada teknologi web services. Pada proyek ini, kelas Greeter akan di”bungkus” dalam Enterprise JavaBean (EJB). Kemudian EJB akan diekspose sebagai endpoint web service. Dengan adanya web sebuah server aplikasi. EJB dirancang sebagai rumah lojik yang digunakan dalam sebuah aplikasi.}

Buat proyek baru dengan memilih File / New Project. Wizard New Project akan muncul.

Untuk Categories, pilih JavaEE. Untuk Projects, pilih EJB Module. Kemudian, klik Next.

Untuk Project Name, ketik GreeterEJBProject

Untuk membuat EJB, klik kanan node GreeterEJBProject dan pilih New / Session Bean. Jendela wizard New Session Bean akan muncul.

Untuk EJB Name, ketik GreeterEJB Untuk Package, ketik greeting

Klik Finish to untuk menerima nilai defaults dan abaikan jendela wizard. Kode GreeterEJBBean.java akan muncul di editor:

{NetBeans menaruh komentar pada kode yang di-generated sehingga dapat diketahui letak kode yang akan disisipkan. Komentar tersebut akan diganti dengan menambahkan sebuah operasi (behavior atau method) untuk kelas ini.}

Posisikan cursor pada blank dibawah komentar, klik kanan dan pilih Insert Code / Add Business Method. Jendela wizard Add Business Method akan muncul.

Untuk Name, ketik: greet

Untuk Return Type, ketik: java.lang.String

Pilih OK dan abaikan jendela wizard. Method greet() akan ditambahkan ke EJB.

Hapus dua baris komentar dan EJBI akan terlihat seperti ini:

Ganti kode return null; dengan kode berikut : Greeter myGreeter = new Greeter();

String greeting = myGreeter.greet(name); return greeting;

Gunakan Alt-Shift-F untuk melakukan reformat kode. Ingat bahwa adanya warna kuning dan merah pada margin kiri, merupakan tanda adanya masalah:

Pindahkan kursor pada bagian atas dari ikon merah di margin kiri dan diketahui bahwa editor tidak dapat menemukan kelas Greeter. Karena itu diperlukan penambahan kelas GreeterJavaProject sebagai library dalam GreeterEJBProject.

{Untuk baris pertama disebut sebagai “constructor” untuk kelas Greeter. Konstruktor ini menciptakan instance dari kelas. Kita akan menyimpan pointer yang merupakan instance dalam sebuah variable yang dinamakan myGreeter.

Statemen return menyederhanakan nilai yang dilewatkan dari variable greeting.}

4.3.2 Menambah Library ke Project

Klik kanan pada node GreeterEJBProject di dalam panel Projects dan pilih Properties. Jendela Project Properties akan

muncul.

Pilih node Libraries pada panel kiri. Kemudian, klik tombol Add Project dan navigasikan ke GreeterJavaProject, kemudian pilih

dan klik tombol Add Project JAR Files. Akan tampak:

Klik OK untuk mengabaikan jendela Properties.

{Ini akan memungkinkan kelas-kelas pada GreeterEJBProject untuk mencapai ke dalam GreeterJavaProject dan memanfaatkan kelas ini.}

4.3.3 Membuat Web Service

{Web service merupakan kemampuan sisi server yang dapat di-invoke dengan mengirimkan sebuah dokumen XML (diformat mengikuti aturan dalam SOAP specification). Web service menerjemahkan XML ke dalam input yang diperlukan, melakukan tugasnya dan membuat dokumen XML SOAP yang berisi hasil.

Sekarang telah ada EJB yang dapat “membungkus” dan bertindak sebagai web service. Kemudian akan dibuat web service berdasar EJB.

Klik kanan GreeterEJBProject dan pilih New / Web Service. Jendela wizard New Web Service akan muncul.

Untuk Web Service Name, ketik GreetingService Untuk Package, pilih greeting dari drop down list.

Klik pada radio button untuk Create Web Service from Existing Session Bean dan gunakan tombol Browse untuk memilih

Klik tombol Finish. Web service ditambilkan di kanvas utama. Lihat kode yang dihasilkan:

{Baris @ merupakan “annotations” yang memungkinkan kode java melakukan beberpa code generation pada saat kompilasi. Pada kasus ini, annotations memberitahu bahwa GreetingService calls adalah berupa stateless EJB yang dapat diakses sebagai web service.

Lakukan ekspansi pada node Web Services dibawah

GreeterEJBProject dalam panel Projects untuk melihat web service

yang terdaftar disini.

{Perhatikan panel Output untuk pesan “BUILD SUCCESSFUL” ketika clean and build telah lengkap. Clean and Build.}

Lakukan ekspansi pada node Web Services dibawah GreeterEJBProject dalam panel Projects untuk melihat web service

yang terdaftar disini. Lakukan Save All .

Lakukan kompilasi kode GreeterEJBProject dengan klik-kanan pada node GreeterEJBProject dan pilih Clean and Build (atau Build saja).

Dengan EJB yang dideploy sebagai pembungkus web services, sekarang dapat ditest dengan mengeksekusi test client untuk web service.

{Butuh waktu sebentur ketika melakukan deploy untuk pertama kali, karena server aplikasi perlu dinyalakan sebelum modul EJB dapat dideploy. Perhatikan panel Output.}

4.3.3 Menguji Web Service

NetBeans akan memudahkan testing web service dengan membuat halaman web untuk test yang dapat memasukkan nilai input dan memanggil operasi web service.

Halaman browser akan tampak dan menyediakan test client. Ketik nilai untuk name (misalnya Mickey Mouse) pada field kosong. Pilih tombol greet.

Halaman hasil akan muncul. Ingat bahwa web service menghasilkan nilai yang diharapkan:

Karena web services menggunakan dokumen XML sebagai “lingua franca” untuk komunikasi, maka method greet() sekarang dapat dijalankan oleh berbagai client yang dapat melakukan pemanggilan web service. Banyak clients dapat membuat pemanggilan web services karena kemampuan SOAP/HTTP tersedia pada semua platform.

Pada proyek selanjutnya, akan didemokan kemampuan client web service dengan membuat user interface berbasis browser untuk menjalankan GreetingService.

{Ingat bahwa web service menerima dokumen XML input, melakukan beberapa pemrosesan dan mengembalikan result dalam bentuk dokumen XML. Hasilnya, perhatikan bahwa bagian SOAP Request menunjukkan input dikirimkan oleh tester. Bagian SOAP Response menunjukkan output yang diterima dari hasil eksekusi method web service.}

4.4.4 Membangun Interface Browser client universal untuk menjalankan web service.

Buat proyek baru untuk client berbasis browser dengan memilih File / New Project. Jendela wizard New Project akan muncul.

Untuk Categories, pilih Java Web dan untuk Projects, pilih Web Application dan klik Next

Untuk Project Name, ketik GreeterWebProject dan klik Next.

Klik Next lagi untuk menerima default pada Server dan Context Path.

Klik pada check box untuk memilih Visual Web JavaServer Faces. Klik Finish. Wizard akan lengkap dan GreeterWebProject akan

tampak pada panel Projects.

{NetBeans membuat miudah dalam menggunakan teknologi JavaServer Pages (JSP) JavaServer Faces (JSF) untuk membuat user interface berbasis browser. JSP adalah komponen yang menghasilkan halaman user interface untuk aplikasi web. Komponen JSF diguankan dalam halaman JSP untuk menyediakan visual widgets (seperti text fields dan buttons).}

Buat user interface berbasis dengan klik-kanan pada GreeterWebProject dan pilih New / Visual Web JSF Page. Jendela

Untuk File Name, ketik GreeterWebUI dan pilih Finish. Jendela wizard akan tertutup, file GreeterWebUI.jsp akan ditambahkan ke hirarki proyek dan kanvas desain akan muncul.

Dari palette, lakukan drag-drop widget Label ke kanvas. Ubah label menjadi Name:

Drag-drop widgetText Field dari palete ke kanvas. Tempatkan di sebelah kanan Name:

Pada panel Properties, ubah property id menjadi nameTextField Atur property columns menjadi 30

Drag-drop widget Button ke kanvas, dan tempatkan dibawah text field.

Ubah label tombol (Text property) menjadi Greet Drag-drop Text Field lain ke kanvas dibawah tombol.

Ubah property text field – untuk id, ketikkan greetingTextField dan untuk columns, ketik 120

Atur ulang komponen sehingga layout akan tampak seperti ini:

Simpan dengan melakukan Save All.

Sintaks JSP akan menetapkan bagaimana HTML dihasilkan dan dikirim ke browser.

{Perlu dilakukan klik-kanan pada kanvas dan mengeksplorasi pilihan Align. Snap to Grid juga berguna. Jika tidak menginginkan text field dapat diubah, maka lakukan disabled property untuk greetingTextField.}

Klik pada pilihan Java view (sebelah JSP view) untuk melihat kode Java pada sisi server yang dihasilkan NetBeans. Kode ini akan merespon interaksi user dari halaman HTML.

Membuat Klien Web Service

Seperti yang telah dikerjakan pada Java user interface, masih diperlukan lojik untuk menangani action dari tombol Greet.

Kembali ke view Design dengan klik pada kendali Design.

Pada saat user melakukan klik tombol Greet, maka akan dipanggil web service yang dibuat pada proyek terakhir ini. Untuk memanggil web service, maka perlu dibuat kode di sisi client yang dapat mengakses web services melalui SOAP yang dikirim lewat HTTP dan menerima kembali respon.

Kode klien dari web service akan dipanggil dari dalam button handler, tetapi pertama kali perlu dibuat kode nya dulu. Kemudian tinggalkan method button1_action() dan buat klien yang akan memanggil method tersebut.

Pada node GreeterWebProject pada panel Projects, klik-kanan dan pilih New / Other / Web Services / Web Service Client. Klik Next. Jendela wizard akan muncul.

Pada field Project, gunakan button Browse untuk menavigasi GreetingService pada GreeterEJBProject, pilih dan klik OK.

Klik Finish untuk mengabaikan wizard.

{Perhatikan tab Retrieve Output pada jendela Output untuk melihat web service diakses dank doe klien web service di-generated.

Akan terlihat bahwa GreetingService ditambahkan dibawah node Web Service References pada hirarki GreeterWeb Project.}

Menambah Event Handler Behavior

Sekarang, telah ada kode klien untuk meminta dari button action handler, perhatikan kembali jendela Java editor yang menampilkan kode untuk halaman GreeterWebUI.jsp.

Posisikan kursor edit dibawah dua baris komentar pada method button1_action() dan tekan Enter untuk membuat baris kosong baru.

Klik-kanan pada baris kosong dan pilih Web Service Client Resources / Call Web Service Operation. Pilih Select Operation agar

jendela wizard Invoke muncul.

Kemudian kode untuk melakukan invoke klien web service akan ditambahkan pada method button1_action().

{Sekarang ada kerangka yang dapat memanggil sisi server web service. Kita perlu mengisi sisa dari kode event handler sehingga dapat memanggil dengan data yang diperlukan (name) dan menggunakan data (greeting).}

Lakukan penyimpanan dengan Save All.

Ubah kode pada handler sehingga method tampak seperti ini:

Ini merupakan keseluruhan kode di dalam blok try yang dapat dicopy-paste:

greeting.GreetingService port = service.getGreetingServicePort(); String name = (String) nameTextField.getText();

String greeting = port.greet(name); greetingTextField.setText(greeting); System.out.println("Result = " + greeting);

{Kode tersebut melakukan:

-

Dapatkan nilai yang dimasukkan ke dalam field Name pada UI

-

Meletakkan hasil greeting dalam field user interface.

-

mengirim greeting ke log file untuk tujuan debugging.}

Gunakan Alt-Shift-F untuk melakukkan reformat kode sehingga lebih dapat tertata.

Akan terlihat ikon pada margin kiri yang menunjukkan masalah. Jika mouse digeser diatasnya, akan terlihat bahwa editor tidak dapat menemukan references untuk dua text fields: nameTextField dan greetingTextField. Selanjutnya ini akan diperbaiki.

Klik pada tab Design untuk kembali ke kanvas layout. Tampak ada masalah:

Ini berarti bahwa kanvas layout tidak dapat didisplay ulang karena ada sesuatu yang salah dengan kode Java.

Kembali ke view Java dan beri tanda comment (//) pada empat baris kode pada blok try:

Fitur Add Binding Attribute menambahkan kode java sehingga kita dapat mempunyai referensi yang berkaitan dengan objek seperti nameTextField dan greetingTextField yang direferensi dalam layout

JSP. Misalnya, untuk text box nameTextField, baris berikut perlu ditambahkan:

private TextField nameTextField = new TextField();

public TextField getNameTextField() {

return nameTextField; }

public void setNameTextField(TextField tf) {

}

Kembali lagi ke view Design dan layout tampak seperti sebelumnya.

Klik kanan pada nameTextField (sebelah label Name) pada kanvas layout dan pilih Add Binding Attribute dari menu pop-up.

Klik-kanan pada greetingTextField (di bawah button Greet) dan pilih Add Binding Attribute.

Kembali ke view Java dan hilangkan tanda comment pada ke empat baris diatas. Ingat bahwa setelah ini tidak lagi ada masalah dengan kode.

Lakukan penyimpanan Save All.

Menguji Aplikasi Web

Lakukan kompile pada kode dengan melakukan klik-kanan pada GreeterWebProject pada panel Projects dan pilih Clean and Build.

Deploy aplikasi web ke server aplikasi dengan melakukan klik-kanan pada GreeterWebProject dan pilih Deploy.

{Perhatikan panel Output untuk pesan sebagai hasil dari Clean and Build and Undeploy and Deploy.

Clean and Build menghasilkan pesan error yang menunjukkan direktori tidak dapat dihapus. Untuk itu lakukan Build saja dan bukan Clean and Build.}

Browser web akan terlihat dan tampak sebagai halaman kosong. Apa yang terjadi?

Seperti pengalaman sebelumnya, masalah ini merupakan masalah default pada proyek. Karena ini merupakan proyek web, ini merupakan halaman JSP. Selanjutnya akan dicek apa default halaman JSP untuk GreeterWebProject.

Programer Java EE sudah paham bahwa halaman yang pertama kali ditampilkan adalah halaman yang ditetapkan pada seting welcome file pada deployment descriptor.

Klik-double pada node web.xml dibawah hirarki

GreeterWebProject / Web Pages / WEB-INF pada jendela Projects.

View design dari deployment descriptor akan ditampilkan. Klik pada tab Pages:

disediakan ketika membuat aplikasi web baru. Halaman JSP yang dibuat adalah GreeterWebUI.jsp dan tampak pada bagian Web Pages dari proyek:

Selanjutnya gunakan view XML untuk membuat halaman GreeterWebUI.jsp sebagai halaman default yang ditampilkan pertama

kali ketika user mengakses aplikasi. Gunakan fitur find (Ctrl-F) pada view XML secara cepat dan lakukan scroll ke area welcome-file-list dari deployment descriptor buat menjadi seperti ini:

Lakukan penyimpanan dengan Save All.

Sekarang, aplikasi web sudah berubah sehingga perlu di deploy ulang.

Setelah berhasil melakukan deploy ulang, coba jalankan lagi GreeterWebProject

Halaman web yang diharapkan muncul sebagai halaman default. Ketik nama di text field sebelah kanan Name.

Selanjutnya lihat kode pada button action handler. Komentar pada akhir baris mengingatkan tentang cara web service dapat dijalankan:

greeting.GreetingService port = service.getGreetingServicePort(); // Get access to web service

String name = (String) nameTextField.getText(); // Get the value in the name field

String greeting = port.greet(name);

// Use web service client to get the greeting from web service greetingTextField.setText(greeting);

// Insert the returned greeting into the text field System.out.println("Result = " + greeting);

// A debug statement to dump a message to the GlassFish log

Jika melakukan klik pada tab GlassFish V2 pada panel Output panel pada bagian bawah jendela NetBeans, akan terlihat hasil dari statemen System.out.println.

User interface berbasis web dijalankan pada server berbasis Greeter POJO menggunakan berbagai layers. Selanjutnya akan ke

BAB 5

Integrasi Basisdata

Studi kasus 2 ini mengacu pada penelitian ini Utomo et al (2009) yang berusaha mengintegrasikan basisdata jarak jauh yang berada diluar perusahaan dengan basisdata lokal di dalam perusahaan. Integrasi basisdata dilakukan dengan melakukan select tabel dari server basisdata jarak jauh, kemudian hasil dari select tabel tersebut diinputkan ke tabel yang sudah ada di server basisdata lokal. Integrasi ini dilakukan dengan menggunakan WS sebagai pembungkus (wrapped) basisdata jarak jauh maupun lokal yang akan diintegrasikan. WS tersebut kemudian diorkestrasi menggunakan BPEL dengan menggunakan framework Java Business Integration. (Lihat Gambar 5.1)

Gambar 5.1 Bagan alir integrasi basisdata (Utomo et al, 2009)

basisdata lokal juga dibungkus sebagai layanan-layanan. WSDL ini digunakan sebagai antarmuka WS yang akan diorkestrasi menggunakan BPEL. Penelitian ini telah berhasil mengambil data dari server basisdata jarak jauh dan dimasukkan ke basisdata lokal dengan menggunakan BPEL (Lihat Gambar 5.2).

Gambar 5.2 Integrasi basisdata menggunakan BPEL

kemudian melakukan request ke Database BC melalui NMR. Database BC mengembalikan pesan ke File BC lagi melalui NMR. File BC kemudian membuat request ke Database BC melalui NMR. Akhirnya pesan dilewatkan ke client melalui NMR. Konsep penting disini adalah NMR merupakan hub yang melakukan routing pesan tidak hanya antara client dengan Binding Component, tetapi juga antar Binding Component yang berbeda.

Gambar 5.3 Aplikasi Komposit

Setelah Aplikasi Komposit dideploy ke server, maka dapat dilakukan pengujian dengan menggunakan Junit Test. Pada Gambar 5.4, menunjukkan bahwa pengujian telah berhasil.

Keberhasilan ini juga ditunjukkan dengan adanya pesan dari SOAP response yang berasal dari aplikasi SOA. Pada direktori output dapat ditemukan bahwa output.xml telah terbentuk (Gambar 5.5), dan jika file ini dibuka akan tampak bahwa terdapat data-data yang berasal dari basisdata melalui perintah select dari sebuah tabel.

Gambar 5.5 File Output.xml yang merupakan hasil dari select tabel

Selain itu dari hasil testing juga dihasilkan data yang berhasil di-insert-kan ke basisdata lokal. Data tersebut berasal dari basisdata

Gambar 5.6 hasil dari select tabel yang di-insert ke basisdata lokal

Dengan demikian penelitian mengenai integrasi basisdata ini dapat digunakan sebagai landasan untuk integrasi aplikasi yang lain, dengan menggunakan berbagai protokol yang sudah disediakan oleh framework JBI seperti protokol SOAP, JMS, File, dsb.

Java Business Integration (JBI) menyediakan landasan bagi

integrasi berbasis SOA. JBI ini menyediakan integrasi fungsi bisnis yang diekspose sebagai layanan-layanan, dan dengan interaksi yang decoupled. JBI menyediakan dukungan langsung bagi pengembangan