PEMBANGKIT FORM QUERY BERBASIS XML PADA PENCARIAN BUKU DI RUANG BACA TEKNIK INFORMATIKA ITS

PEMBANGKIT FORM QUERY BERBASIS XML PADA PENCARIAN BUKU DI RUANG BACA TEKNIK INFORMATIKA ITS Diana Purwitasari, Bhakti Utama, Aris Tjahyanto Jurusan Teknik Informatika, Fakultas Teknologi Informasi, Institut Teknologi Sepuluh Nopember (ITS) Kampus ITS, Jl. Raya ITS, Sukolilo, Surabaya 60111, Indonesia Tel. +62 31 5939214, Fax. +62 31 5939363 Email: [email protected], [email protected]

ABSTRAK Data-data yang beragam dan tersebar di berbagai sistem database mengharuskan pengguna untuk melakukan pencarian agar mendapatkan data yang benar-benar diinginkan. Oleh karenanya dibutuhkan sebuah fasilitas pencarian data berbasiskan web (form query) yang dihasilkan secara otomatis dari berbagai struktur database relasional dengan memanfaatkan teknologi XML. Adanya pembangkit form query akan mempermudah pembangunan halaman web yang digunakan untuk melakukan pencarian data pada sebuah sistem database. Pembangkit form query meliputi fasilitas untuk melakukan konfigurasi koneksi database, pemilihan presentation library sebagai desain antarmuka, pemilihan tabel dan kolom database yang akan diikutsertakan dalam query form, pemberian tipe dan atribut kontrol bagi tiap-tiap kolom yang terpilih dan pembangkitan halaman query form dan result page yang berbasiskan XML dan JSP. Pengujian dilakukan untuk menghasilkan query form berserta result page-nya dari berbagai strukur tabel yang berbeda. Uji coba pada halaman query form yang dihasilkan dapat menterjemahkan parameter-parameter pencarian melalui runtime-engine sebagai SQL query dan menghasilkan result page dengan fasiltas paging, sorting dan filtering. Kata Kunci: Query, Form, Report, XML, XSL, Database

1. PENDAHULUAN Pada sistem konvensional jarang dibuat form query dari sebuah sumber database, sebagian besar hanya menggunakan sebuah input text untuk memasukkan keyword yang akan dicari. Kelemahannya adalah hasil yang didapatkan tidak selalu yang diinginkan, hal ini disebabkan, pertama karena pencarian dilakukan pada seluruh kolom dari tabel, kedua tidak bisa melakukan pembatasan kriteria pada sebuah atau beberapa kolom. Ketika database atau tabel dengan struktur yang berbeda membutuhkan sebuah form query, maka proses desain antarmuka dan program pencari (search engine) harus dilakukan lagi dari awal. Sehingga sebuah sistem pembangkit dibutuhkan untuk membangun form query dari struktur tabel dan database yang bermacam-macam. Permasalahan yang timbul kemudian adalah cara untuk mendapatkan XML schema dari tabel-tabel yang ada, melakukan proses pada XML schema untuk mendapatkan elemen-elemennya dan menggunakannnya dalam proses annotation, melakukan kompilasi pada data annotation dan presentation library untuk membangkitkan form query dan result page serta menampilkan data-data hasil pencarian pengguna sebagai result page

dengan kemampuan untuk mengurutkan data, memfilter data dan melakukan navigasi antar halaman. Diharapkan nantinya dapat dihasilkan form query dan result page berbasiskan web dari database literatur buku ruang baca jurusan Teknik Informatika ITS dengan struktur tabel yang berbeda. Untuk itu dalam membangkitkan form query harus mendukung pemisahan antara data modeler (database), annotation author (pembuat bentuk logic query form) dan web designer (desainer antarmuka / presentasi).

2. SISTEM PEMBANGKIT FORM QUERY Pembangkit form query akan memisahkan antara proses query dan presentasi hasil query dengan membangun form query dan result page dari dua buah inputan, yang pertama adalah annotation yang menspesifikasikan bentuk kontrol form query dan result page yang akan diterapkan, sedangkan yang kedua adalah template presentation yang merepresentasikan query form dan result page. Gambar 1 menunjukkan proses-proses dalam pembangkit form query.

Gambar 1. Diagram Sistem Pembangkit Form Query

Gambar 2. Tahap Pengembangan Sistem Pembangkit Form Query Diperlukan pemisahan antara data yang menyajikan isi informasi (information content), bentuk logic dari halaman webnya (logika dari form query dan result page) dan desain presentasi sebagai hasil akhir yang dilihat pengguna (template presentation), sehingga

Gambar 3. Penentuan XML Schema dengan adanya pemisahan yang disebutkan di atas maka setiap komponen yang menyusun bisa dikembangkan oleh orang-orang yang berbeda. Information content dikembangkan oleh data modeler, logika dari form query dan result page dikembangkan oleh annotation author dan template presentation dibuat oleh web designer. Tiap komponen tersebut bersifat independen, artinya bisa diubah dan diperluas tanpa mempengaruhi satu sama lain. Proses pengembangan pembangkit form query terdiri dari tiga tahap, seperti yang ditunjukkan pada Gambar 2. Tahap pertama, yaitu fase desain, annotation author menspesifikasikan bentuk logic dari form query dan result page yang akan dibangkitkan, menghasilkan annotation data yang terdiri form annotation dan result annotation. Tahap kedua, yaitu fase kompilasi, presentasi dari form query dan result page di bangkitkan dari modul compiler. Tahap ketiga yaitu fase run-time,

<xsd:schema xmlns:xsd="http://www.w3.org/2000/10/XMLSchema"> <xsd:element name="SCHEMA"> <xsd:complexType> <xsd:sequence> <xsd:element name="ROW" minOccurs="0" maxOccurs="unbounded"> <xsd:complexType> <xsd:sequence> <xsd:element name="YEAR" type="xsd:string"/> <xsd:element name="TITLE" type="xsd:string"/> <xsd:element name="AUTHOR" type="xsd:string"/> <xsd:attribute name="num" type="xsd:integer"/> Gambar 4. Contoh Hasil XML Schema

text YEAR <max>20 <size>20 text TITLE <max>20 <size>20 text AUTHOR <max>20 <size>20

Gambar 5. Contoh Form Annotation pengguna mengakses form query yang telah dibangkitkan dan modul run-time engine akan menyusun query berdasarkan parameter nilai yang di-submit pengguna, kemudian server mengembalikan dalam bentuk data XML sebagai result page. a. XML Schema XML schema yang digunakan selama fase desain merupakan hasil pembangkitan kolom-kolom tabel dalam database. Seorang annotation author akan melakukan query dengan menggunakan bahasa SQL, dan sebuah komponen yang bernama XML SQL Utility (XSU) pada proses pembangkitan XML schema. File XML schema yang telah dibangun akan digunakan untuk menampilkan struktur kolom yang telah dipilih pembuat annotation dan diberikan anotasi/keterangan sebagai kontrol yang akan menyusun halaman form query dan result page. Gambar 3 menunjukkan langkah-langkah dalam pembangkitan XML schema. Sebagai contoh, seorang annotation author melakukan query menggunakan SQL berikut : select YEAR, TITLE, AUTHOR from BOOK Dari SQL tersebut ada tiga buah kolom yang dipilih dari tabel BOOK, yaitu kolom YEAR, TITLE dan AUTHOR. Struktur data dari query tersebut akan dibangkitkan dalam bentuk XML schema, seperti

Gambar 6. Contoh Form Query yang ditunjukkan pada Gambar 4. Selanjutnya XML schema tersebut akan terus digunakan selama fase desain. b. Kontrol Form Query Tipe kontrol yang didukung pembangkit form query:  Text untuk kondisi yang melibatkan data string  Select untuk kondisi yang melibatkan sebuah kumpulan nilai konstan  Range untuk kondisi yang melibatkan kisaran data angka  Unequal untuk kondisi yang melibatkan pertidaksamaan data angka. Semua kontrol tersebut mempunyai properti masingmasing seperti ukuran, maksimum karakter dan label. Pada fase desain, annotation author memutuskan data elemen dari XML schema yang diinginkan untuk menjadi bagian dari form query (contoh ditunjukkan pada Gambar 5). Annotation author telah menentukan jenis kontrol dan nilai properti yang dimiliki tiap elemen. Untuk TITLE dipilih kontrol dengan tipe text yang melibatkan kumpulan data bertipe string. Dari properti yang telah diset, sebuah form annotation akan disimpan dalam sebuah file format XML. Pada fase kompilasi form annotation akan digunakan sebagai input, bersama template presentation library yang berisi template untuk tiap jenis kontrol query. Misal elemen form pada halaman form query yang mempresentasikan kontrol bertipe text adalah label dan input text (contoh ditunjukkan pada Gambar 6). Seorang web designer mempunyai pilihan untuk mengubah bentuk dari tiap tipe kontrol dengan melakukan perubahan pada template presentation library. Hal ini disebut sebagai fase customization. Ketika pengguna melakukan submit pada halaman form query, sebuah run-time engine berbasiskan JSP dan XSU akan menerima parameter-parameter yang diteruskan pada bagian konstruksi SQL query.

1990 <TITLE>Computer Organization Hamacher, V. Carl 1990 <TITLE>Computer Architecture a Quantitative Approach Patterson, David A. 1990 <TITLE>Computer for Artificial Intelligence Processing Wah, Benjamin W 1990 <TITLE>Computer Design and Architecture Pollard L. Howard Gambar 7. Contoh XML Hasil Query XSU Kemudian bagian konstruksi akan berhubungan dengan XSU untuk meminta data berdasarkan SQL query yang terbentuk pada database. Kemudian data yang berupa XML akan diteruskan sebagai result page. c. RunTime Engine Form query yang telah dihasilkan tidak akan berguna jika tidak ada sebuah run-time engine yang menerima parameter-parameter pencarian, menyusun SQL query dan mengakses data-data dalam database. Run-time engine yang digunakan adalah gabungan antara Java Server Page (JSP) dan XML Query Utility (XSU) yang merupakan komponen milik Oracle. Tugas utama halaman JSP adalah membangun SQL query dengan data-datanya didapat dari parameterparameter yang dikirim pengguna melalui form query. Sedangkan tugas utama dari XSU dalam fase runtime adalah menerima string SQL query dari halaman JSP untuk diteruskan ke database dan mengembalikan string XML dari data yang di-query. String XML yang dihasilkan itu akan menyusun bagian-bagian dari result page dan dikirim ke pengguna. Sebagai contoh SQL query yang dibangun dari form query adalah "select BOOK.YEAR, BOOK.TITLE, BOOK.AUTHOR from BOOK where

string YEAR YEAR no <sorting>no no string TITLE TITLE no no string AUTHOR AUTHOR no no Gambar 8. Contoh Result Annotation

Gambar 9. Contoh Result Page BOOK.YEAR like '%1990%' and BOOK like '%COMPUTER%'" String SQL query tersebut akan menjadi input bagi XSU, dan XSU akan meneruskannya ke database Oracle. Hasil query yang berupa record data-data akan diformat oleh XSU menjadi string XML, seperti yang terlihat pada gambar 7. String XML tersebut harus di-render oleh presentation library untuk membentuk sebuah result page. d. Result Page Result page sebenarnya adalah hasil output dari proses yang dilakukan oleh run-time engine dan diterima oleh pengguna. Annotation author melakukan pemilihan pada saat fase desain untuk menentukan kolom atau elemen yang akan muncul pada result page. Data-data tersebut disimpan sebagai result annotation seperti Gambar 8. SQL query yang dibangun dari run-time engine akan meminta data hanya pada kolom yang disebut pada result annotation. Seperti Gambar 7 dimana data XML yang didapat hanya dari kolom-kolom yang ada pada result annotation. Data XML tersebut akan dirender dengan sebuah XSL presentation library dan terlihat seperti Gambar 9.

Gambar 10. Tampilan untuk Proses Annotation

Gambar 11. Contoh Hasil Pembangkitan Form Query

3. UJI COBA Pengujian dilakukan untuk membuktikan keberhasilan dalam membangkitkan form query. Namun masih diperlukan annotation author untuk memilih kontrol yang sesuai saat fase desain dan web designer yang mengembangkan presentation library (desain antar muka) dari form query. Sistem pembangkit form query diimplementasikan dalam Java dengan data yang digunakan sebagai studi kasus adalah data buku-buku dari database ruang baca Teknik Informatika ITS. Pada proses pembangkitan halaman form query, tabel yang dilibatkan hanya direlasikan dengan tabel lain dengan kedalaman satu relasi. Halaman yang dihasilkan akan berbasiskan JSP, HTML, XML dan JavaScript (syarat minimal Internet Explorer 5.5).

Gambar 12. Contoh Hasil Pembangkitan Result Page

 SKENARIO 1 Dilakukan dengan membuat beberapa form query dari tabel-tabel yang ada dalam database. Pengguna

dapat memilih tabel, kolom-kolom dan fasilitas untuk melakukan proses annotation. Gambar 10 adalah tampilan untuk proses annotation. Hasil

Expand

Collapse

Gambar 12. Contoh Hasil Pembangkitan Result Page dengan Presentation Berbeda

Gambar 16. Contoh Expand dan Collapse pada Hasil Pembangkitan Result Page pencarian data maka akan mendapatkan result page seperti Gambar 12.  SKENARIO 2 Dilakukan untuk menguji keberhasilan fungsi pengubahan presentation library. Form query yang telah dibuat pada skenario 1 akan diubah desain antarmukanya dengan beberapa presentation library telah yang dibuat sebelumnya oleh web designer. Pada Gambar 13 ditunjukkan contoh hasil perubahan result page dengan presentation library yang berbeda.

Gambar 13. Contoh Paging pada Hasil Pembangkitan Result Page

 SKENARIO 3 Dilakukan untuk menguji hasil dari form query dengan mengakses halaman-halaman tersebut (form query dibuat berdasarkan default presentation library). Contoh pencarian untuk mendapatkan data buku tesis / tugas akhir S1 pada tahun 1998 sampai dengan tahun 2000 dengan judul tesis yang memiliki kata algoritma. Pengujian proses paging dilakukan dengan bantuan fungsi JavaScript moveto() yang dipanggil melalui link First, Next, Previous, Last pada XSL, seperti yang terlihat pada Gambar 13 (telah ditentukan jumlah tampilan per halaman sebanyak 4 record).

Gambar 14. Contoh Sorting pada Hasil Pembangkitan Result Page

Gambar 15. Contoh Filtering pada Hasil Pembangkitan Result Page pembangkitan form query menggunakan default presentation library ditunjukkan pada Gambar 11. Jika form query tersebut dieksekusi dan dilakukan

Gambar 14 menunjukkan hasil dari proses sorting melakukan klik pada header tabel (contoh sorting berdasarkan kolom Penulis). Fasilitas lain untuk membantu pengguna dalam pencarian adalah filtering dengan kode XSL yang memanggil fungsi JavaScript filter(). Contoh filtering pada kolom Tahun, dengan memilih tahun 1998 pada combo box, maka yang ditampilkan adalah tugas akhir pada tahun 1998 saja ditunjukkan pada Gambar 15. Terakhir pengujian proses expand dan collapse pada kolom Abstrak karena besar ukuran text yang dimilikinya, sehingga hanya ditampilkan jika

memang diinginkan oleh pengguna. Proses expand collapse dibantu fungsi JavaScript blocking(). Pada Gambar 16 ditunjukkan hasil dari proses expand.

4. SIMPULAN Pada tahap untuk menghasilkan form query beserta result page, proses pembuatan XML schema dan datanya dibantu XML SQL Utility (XSU). Untuk menghasilkan form query dilakukan proses transformasi data annotation dalam format XML dengan sebuah presentation library dalam format XSL. Halaman result page menampilkan hasil pencarian dalam format XML, sehingga fungsi filtering, sorting dan paging dapat dilakukan pengguna tanpa terhubung ke server.

5. REFERENSI [PET01] Petropoulos , Michalis et. al., “XML Query Forms (XQForms): Declarative Specification of XML Query Interfaces”. Hongkong, 2001. [QUA98] Quatrani, Terry, “Visual Modeling With Rational Rose And UML”. Massachusetts, Addison Wesley Longman, 1998. [ARM02] Armstrong, Eric, “Java Web Services Tutorial". California, Sun Microsystems, 2002.