Oleh:Galih Adi Paryanto 5108100005Febri Fernanda 5108100136

Nazarudin 5108100187

Ajax-Enabled JavaServerTM Faces Web Application

Introduction

2

Chapter ini membahas masalah pembangunan aplikasi web dengan konsep yang lebih maju.

Didiskusikan masalah pengaksesan, updating dan pencarian database di aplikasi web, penambahan virtual form pada sebagai form input halaman web dan penggunaan Ajax-enabled untuk meningkatkan kemampuan dan responsiveness aplikasi.

Pembangunan aplikasi address book tunggal dalam tiga tingkat untuk mengilustrasikan konsep ini. Aplikasi ini menggunakan Java DB database untuk menyimpan nama dan alamat contact.

Introduction (cont)

3

Versi pertama dari aplikasi tersebut, menambah dan menampilkan daftar contact dalam sebuah komponen JFS Table.

Versi kedua, menambahkan komponen Ajax-enabled Autocomplete Text Field dan membuatnya mampu mensugesti daftar nama.

Versi ketiga, bisa melakukan pencarian address book untuk sebuah contact dan menampilkannya alamat yang cocok pada peta menggunakan komponen Ajax-enabled Map Viewer yang ditangani Google Maps.

Accesing Databases in Web Application

4

Aplikasi yang akan dibangun menggunakan Java DB database untuk menyimpan contact dalam address book dan menampilkannya dalam halaman web.

Halaman web memungkinkan user memasukkan contact baru ke form yang terdiri dari komponen Text Field untuk first name, last name, street address, city, state dan zip code. Dalam form juga terdapat Submit button untuk mengirim data ke server dan Clear button untuk mengosongkan kembali form. Aplikasi menyimpan informasi ini dalam database (AddressBook) yang memiliki tabel tunggal (Addresses).

Building a Web Application That Displays Data from a Database

5

Step 1: Membuat ProjectStep 2: Membuat Form untuk User InputStep 3: Menambah sebuah Komponen Tabel ke

HalamanStep 4: Membuat sebuah Java DB DatabaseStep 5: Menambah sebuah Tabel dan Data ke

AddressBook DatabaseStep 6: Mengikat Komponen Tabel ke Addresses

Table dari AddressBook DatabaseStep 7: Mengubah addressesRowSet’s SQL

StatementStep 8: Penambahan Validasi

Step 1: Membuat Project

6

Dalam Netbeans, membuat sebuah project Visual Web Application yang diberi nama AddressBook. Me-rename JSP dan page bean file dengan AddressBook menggunakan refactoring tool.

Step 2: Membuat Form untuk User Input

7

Dalam mode Design, menambah Text Field untuk tempat pengisian first name, last name, street address, city, state dan zip code. Atur properti yang diperlukan setiap Text Field. Kemudian menambahkan sebuah Submit dan Clear button yang masing-masing untuk melakukan validasi dan menggagalkan validasi.

Step 3: Menambah sebuah Komponen Tabel ke Halaman

8

Drag sebuah komponen Tabel dari Basic section di Palette ke halaman, komponen Tabel itu menyusun dan menampilkan data dari database tabel. Atur properti yang dibutuhkan tabel.

Step 4: Membuat sebuah Java DB Database

9

Langkah-langkahnya:1. Pilih Tools > Java DB Database > Create Java DB Database….2. Masukkan nama database yang akan dibuat (AddressBook), user name (iw3htp4) dan password (iw3htp4), kemudian klik OK untuk membuat database.

Di Runtime tab Netbeans, step paling awal membuat entry baru di Database node yang ditunjukkan dengan URL dari database (jdbc:derby://localhost:1527/AddressBook). Hal ini menunjukkan bahwa database berada di local machine dan menerima koneksi pada port 1527.

Step 5: Menambah sebuah Tabel dan Data ke AddressBook Database

10

Runtime tab digunakan untuk membuat tabel dan menjalankan SQL statement yang menggabungkan database dengan data:1. Klik Runtime tab dan kembangkan Databases node.2. Netbeans harus terhubung dengan database untuk menjalankan SQL statement. Jika telah terhubung maka proses ke step 3. Jika belum maka harus di hubungkan dulu.3. Kembangkan node untuk database AddresssBook, klik kanan node Tables dan pilih Execute Command… untuk membuka SQL Command editor di Netbeans. Untuk menjalankan SQL Command, klik kanan SQL Command editor dan pilih Run Selection.

Step 6: Mengikat Komponen Tabel ke Addresses Table dari AddressBook Database

11

Untuk membuat ikatan cukup dengan drag tabel database dari Server tab dan drop ke komponen Tabel.

Untuk memilih kolom tabel apa saja yang ingin ditampilkan diatur dalam Bind to Data. Nama kolom tabel bisa diubah lewat Properties.

Address book mungkin memiliki banyak contact, jadi hanya sebagian saja yang dapat ditampilkan sekali waktu. Hal ini dapat diatur dengan paginationControls pada Properties.

Step 6: Mengikat Komponen Tabel ke Addresses Table dari AddressBook Database (cont)

12

Atur properti internalVirtualForm addressesTable untuk mencegah pagination control button pada Tabel dari submitting Text Field pada form setiap kali user ingin melihat grup contact berikutnya.

Mengikat Tabel ke sebuah data provider, ditambahkan objek baru addressesDataProvider (instansiasi dari class CachedRowSetProvider) ke AddressBook node di Outline. CachedRowSetProvider dapat mengarah sebuah komponen Tabel untuk menampilkan data RowSet.

Step 7: Mengubah addressesRowSet’s SQL Statement

13

CachedRowSet dibungkus dalam addressesDataProvider diatur secara default untuk menjalankan SQL query yang memilih semua data di tabel Addresses dari database AddressBook.

SQL query dapat diubah dengan memperluas SessionBean node di jendela Outline dan double klik elemen addressesRowSet untuk membuka jendela query editor.

Contoh untuk mengurutkan contact menurut last name dulu baru first name secara ascending:

ORDER BY IW3HTP4.ADDRESSES.LASTNAME ASC,

IW3HTP4.ADDRESSES.FIRSTNAME ASC

Step 8: Penambahan Validasi

14

Penting untuk memastikan data berhasil dimasukkan ke database AddressBook.

Semua kolom database bertipe varchar (kecuali ID) dan mempunyai batas panjang. Maka dari itu perlu ditambahkan Length Validator untuk setiap komponen Text Field atau mengatur properti maxLenght setiap Text Field.

Yang terakhir, drag komponen Message Group ke kanan Text Field. Komponen ini digunakan untuk menampilkan pesan error ketika usaha menambah contact gagal. Atur properti showGlobalOnly Message Group menjadi true.

Ajax-Enabled JFS Component

15

Komponen library Java BluePrint Ajax menyediakan komponen Ajax-enabled JFS.Component Description

AutoComplete Text Field

Buy Now Button

Map Viewer

Popup Calendar

Rating

Rich Textarea Editor

Select Value Text Field

Membuat Ajax request untuk menampilkan daftar sugesti sebagaimana user ketik di Text Field.

Inisiasi transaksi lewat PayPal website.

Menggunakan Google Maps API untuk menampilkan peta yang bisa diperbesar dan memilih lokasinya sesuai keinginan

Menyediakan kalender yang memungkinkan user untuk melakukan scroll antara bulan dan tahun. Mengisi Text Field dengan format date ketika user memilih sebuah hari.

Menyediakan sebuah five-star rating bar yang dapan menampilkan pesan jika user memindahkan mouse diatas rating tadi.

Menyediakan sebuah editable text area yang mengijinkan user memformat text dengan huruf, warna, hyperlinks dan background

Menampilkan daftar sugesti dalam drop-down sebagaimana yang user ketik, hampir mirip dengan AutoComplete Text Field.

Auto Complete Text Field and Virtual Forms

16

Misal pada aplikasi addresbook. Auto Complete Text Field Component akan menyediakan daftar sugesti sebagaimana user ketik. Sugesti tersebut didapatkan dari data source, seperti database, atau dari web service.Dengan cepat, form baru muncul dan mengijinkan user untuk mencari addres book dengan menampilkan nama dari daftar. Jika user memilih contact, maka aplikasi akan menampilkan contact’s name dan alamat dalam sebuah peta . Untuk membangun aplikasi ini, harus melalui 2 tahapan. Pertama, dengan menambahkan AutoComplete Text Field dalam aplikasi tersebut yang akan menampilkan sugesti-sugesti berupa nama sebagaimana yang user ketik. Selanjutnya dengan menambahkan search functionality dan tampilan peta di langkah berikutnya.

Configuring Virtual Forms

17

Virtual form memungkinkan developer untuk menampilkan multiple form di page yang sama.

Untuk menambahkan virtual form dalam sebuah page :1. Klik kanan pada komponen submitter dalam form dan pilih Configure Virtual Forms. 2. Klik New untuk menambahkan virtual form, lalu klik Name pada kolom dan tuliskan nama form yang baru. 3. Double klik submit kolom dan ubah option menjadi Yes untuk mengindikasikan bahwa button ini digunakan untuk men-submit virtual form. 4. Klik OK untuk keluar dari dialog. Selanjutnya, pilih semua komponen input yang akan digunakan dalam virtual form. 5. Klik kanan satu dari komponen yang dipilih dan pilih Configure Virtual Forms. 6. Di kolom Participate , ubah option menjadi Yes untuk mengindikasikan bahwa nilai di komponen ini harus di-submit ke server.

Untuk menampilkan virtual form yang telah dibuat, klik tombol Show Virtual Form.

JSP File with Virtual Forms and an AutoComplete Text Field

18

Dalam AutoComplete Text Field terdapat sebuah method yang disebut nameAutoComplete_complete. Untuk membuat method ini, klik kanan komponen nameAutoComplete di Design view dan pilih Edit Event Handler > complete.

Providing Suggestion for an AutoComplete Text Field

19

Method nameAutoComplete_complete digunakan setelah setiap tombol di AutoComplete Text Field meng-update daftar sugesti berdasarkan text yang diinputkan user. Method ini hanya menerima string/text yang diinputkan user dan CompletionResult object yang digunakan untuk menampilkan sugesti kepada user.

GoogleMaps map viewer Component

Pengantar

21

Penambahan Map viewer Ajax enabled JSF component ke dalam halaman adalah untuk menampilkan peta dari suatu wilayah untuk suatu alamat

Map viewer memakai google maps API web service untuk mencari dan menampilkan peta.

Pengantar(2)

22

Untuk saat ini,pemakaian googlemaps API dianalogikan untuk membuat method biasa yang dipanggil dalam objek map viewer dan bean yang mendukungnya dalam file page bean.

Ketika suatu kontak ditemukan, maka akan menampilkan peta dengan menggunakan Map Marker yang akhirnya menunjukkan koordinat(point) dari lokasi dan mengindikasikan nama kontak dan alamatnya.

Cara memperoleh Sebuah GoogleMaps API key

23

Untuk menggunakan map viewer, user harus punya akun dengan google. Jika belum punya, silakan kunjungi : www.google.com/accounts/ManageAccount

Untuk mendapatkan keynya,setelah login klik link berikut :

www.google.com/apis/maps

Cara memperoleh Sebuah GoogleMaps API key(2)

24

Key yang didapat akan dispesifikkan ke web application kita dan akan membatasi jumlah peta yang aplikasi bisa tampilkan per hari

Ketika kita sign up untuk key tersebut , maka kita akan ditanyai untuk mengisikan url untuk application yang akan memakai googlemaps API

Menambah map viewer component ke halaman

25

Penambahan map viewer component di bawah nameAutoComplete menggunakan Addressbook.jsp yang dibuka dalam Design mode.

Pada window Properties , set property key mapviewer dari key yang kita dapat sebelumny(akses googlemaps API)

Set rendered property ke false agar peta tidak ditampilkan ketika user belum mencari sebuah alamat dan set zoomlevel menjadi 1 sehingga user dapat melihat nama jalan dalam peta.

Menambah map viewer component ke halaman(2)

26

CncsalDrop map marker(dari BluePrints AJAX Support Beans section dalam Palette) dimanapun dalam halaman.

Ikat(Bind) marker ke map sehingga marker akan ditampilkan dalam map. Caranya :

- Klik kanan pada Map Viewer dalam Design mode component dan pilih PropertyBinding.

- Select info dari kolom Select bindable property lalu select Map Marker dari kolom Select Binding target. Apply dan terakhir close.

Menambah data provider ke dalam pageUntuk menyelesaikan proses di atas, kita

butuh data provider kedua untuk mencari AddressBook databes based pada nama depan dan belakang yang diisikan di AutoComplete TextField

Perlu diketahui bahwa Disini kita membuat datasource baru, bukan memakai kembali yang masih eksis, ini karena query pencarian untuk kontak berbeda dengan query untuk menampilkan semua kontak

27

Menambah data provider ke dalam page(2)Dalam Runtime tab, kembangkan Databases

node, Addressbook database’s node dan Tables node-nya untuk membuka Addresses table

Drag Addresses table pada page untuk membuat data provider baru

Pilih new data provider pada Navigator tab dan ubah id-nya menjadi addressesSearchDataProvider

Pada outline tab, sebuah node baru dinamakan addressesRowSet1 telah ditambahkan pada node SessionBean1. Ubah id dari addressesRowSet1 menjadi addressesSearchRowSet

28

Menambah data provider ke dalam page(3)

Dobel klik node addressesSearchRowSet untuk mengedit statement SQL

Untuk menambah search parameters pada SELECT statement yang akan dieksekusi oleh RowSet enter text “=?“ pada kolom Criteria pada baris nama depan dan belakang dalam SQL statement editor table

Pastikan jika baris berikut telah tertambah pada SQL statement

WHERE JHTP7.ADDRESSES.FIRSTNAME = ? AND JHTP7.ADDRESSES.LASTNAME = ?

yang mengndikasikan bahwa RowSet sekarang mengeksekusi parameterized SQL statement.

29

Geocoding Service ObjectGeocoding Service object merupakan salah

satu object dari BluPrints AJAX SupportBeans section of the Palette

Fungsinya untuk mengkonversi alamat jalan ke koordinat lintang dan bujur dimana dipakai Map Viewer component untuk menampilkan peta yang tepat

30

Geocoding Service Object(2)Method Geocoding Service Object’s

geocode menerima alamat sebagai argumen dan mengembalikan array dari objek GeoPoint yang merepresentasikan lokasi yang sesuai dengan address parameter.

Objek GeoPoint menyediakan koordinat lintang dan bujur dari lokasi yang diberikan

31

Wes Cukup, Matur Suwon

Sumber :Internet & World Wide Web How To Program 4th

edition

32