Proyek Annotea sendiri terbagi menjadi dua komponen, yaitu pada sisi server dan sisi client [5]. Penelitian kali ini difokuskan pada sisi client. Pada sisi server, digunakan layanan publik milik W3C,
yaitu server Annotea yang beralamatkan pada URL: http://annotest.w3.org/annotations dan server XSLT yang beralamatkan pada URL: http://www.w3.org/2005/08/online_xslt/. Server pertama nantinya akan berfungsi sebagai server database yang mampu menyimpan informasi anotasi dalam bentuk RDF Triple, sedangkan server yang kedua digunakan untuk melakukan proses transformasi yang diperlukan sebagai bagian dari proses untuk mengatasi masalah yang ditimbulkan dari adanya aturan Same Origin Policy.
Pada sisi client, pengguna akan dihadapkan dengan sebuah antarmuka berbasis web. Pada prosesnya, sistem akan mengirimkan dua HTTP request kepada server XSLT dengan beberapa parameter dengan dua tujuan yang berbeda. Request yang pertama digunakan untuk melakukan proses transformasi dan menghasilkan halaman web sesuai dengan bentuk asli pada frame sedangkan request yang kedua digunakan untuk menampilkan daftar anotasi yang berhubungan dengan alamat URL yang dimasukkan oleh pengguna.
Parameter yang pertama adalah dokumen XSL yang digunakan untuk proses transformasi. Dokumen XSL yang digunakan berbeda untuk dua request yang disebutkan diatas. Dokumen XSL yang pertama hanya berfungsi untuk menampilkan halaman web asli. Pada dokumen ini, perlu ditambahkan kode yang memungkinkan halaman web dapat muncul secara sempurna. Hal ini diperlukan mengingat adanya aturan Same Origin Policy yang tidak mengijinkan sebuah dokumen yang di-load pada sebuah origin untuk dimodifikasi oleh origin lain, sehingga dokumen harus ditransformasikan dengan cara menyertakan alamat URL pada query string alamat URL yang lain. Dokumen XSL yang kedua berfungsi untuk menampilkan daftar anotasi pada sebuah halaman web. Dokumen XSL yang digunakan adalah dokumen XSL milik Dominique Hazaël-Massieux [3].
Parameter input yang kedua adalah dokumen XML atau XHTML dari URL yang dimasukkan oleh pengguna. Mengingat tidak semua halaman sudah menggunakan standarisasi XML atau XHTML, maka digunakan layanan dari W3C, yaitu Tidy, yaitu sebuah layanan yang berfungsi untuk “memperbaiki” kode-kode non XHTML menjadi kode yang valid. Hal ini diperlukan karena untuk proses transformasi, server XSLT hanya menerima input yang valid.
Parameter yang ketiga merupakan parameter yang nantinya akan digunakan oleh dokumen XSL untuk melakukan HTTP Request ke server annotea.
Gambar 1 : Arsitektur Sistem
HASIL DAN PEMBAHASAN
Program secara umum dapat dibagi menjadi empat tahap, yaitu query web dan anotasi, pembuatan anotasi baru, modifikasi anotasi, dan penghapusan anotasi. Tahap pertama adalah query web dan anotasi. Proses dimulai dengan memasukkan alamat URL pada bagian input. Sistem membutuhkan alamat URL yang lengkap sesuai dengan bagian yang hendak dianotasi. Sebagai contoh, jika alamat URL yang hendak dianotasi adalah www.example.com, maka penulisan pada kotak URL adalah http://www.example.com/. Gambar 2 merupakan contoh tampilan ketika sebuah halaman berhasil ditampilkan beserta dengan daftar anotasinya.
Untuk proses query, ketergantungan terhadap layanan Tidy dari W3C sangatlah besar, terutama untuk proses transformasi. XSLT mewajibkan dokumen input harus dalam bentuk XML, sehingga halaman web yang tidak sesuai dengan standar XML harus dikonversikan terlebih dahulu. Jika halaman tidak dapat diproses dengan baik, maka dapat dipastikan bahwa proses transformasi akan mengalami kegagalan. Layanan Tidy tidak luput dari kesalahan, sehingga terkadang ada beberapa dokumen yang tidak bisa diproses dengan benar. Halaman web yang mengandung frame ataupun iframe yang mengambil informasi dari situs lain merupakan contoh dokumen yang pada umumnya mengalami kegagalan dalam proses transformasi, meskipun pada halaman aslinya sudah valid.
Salah satu masalah terbesar implementasi dari Annotea Client ini adalah adanya aturan Same Origin Policy yang melarang sebuah host (origin) untuk mengambil informasi pada origin yang berbeda [10]. Masalah ini tidak muncul pada sebagian besar aplikasi Annotea Client yang terintegrasi dengan sebuah aplikasi browser, karena aplikasi tersebut langsung mengambil informasi dari halaman yang dimuat oleh browser. Implementasi yang dibuat disini berbasis web, sehingga alamat URL yang digunakan untuk mengakses sistem dengan alamat URL yang akan dianotasi jelas akan berbeda. Solusi yang dilakukan adalah dengan menyertakan URL yang hendak dianotasi pada query string pada URL sistem. Ilustrasi dari pelanggaran Same Origin Policy dapat dilihat pada gambar 3, sedangkan solusi yang dibuat pada gambar 4.
Gambar 3 : Pelanggaran Same Origin Policy
Gambar 4 : Solusi Mengatasi Same Origin Policy
Cara ini bisa menyelesaikan masalah same origin policy, akan tetapi halaman web yang ditampilkan tidak akan sempurna, karena referensi alamat path root dari URL tersebut adalah http://www.example.com, dan bukan http://www.foobar.com. Hasilnya file-file yang ditulis dengan alamat path relatif pada http://www.foobar.com tidak akan dapat ditampilkan atau diproses dengan benar, karena file tersebut tidak ada pada situs http://www.example.com. Sebagai solusinya, digunakanlah proses transformasi XSLT yang mengkonversi halaman web dengan menambahkan satu elemen, yaitu elemen <base> yang digunakan untuk memberitahukan informasi alamat base path dari sebuah halaman
web. Dengan memberikan tambahan elemen ini, maka halaman web dapat ditampilkan sesuai dengan halaman aslinya, meskipun berada dalam frame yang berbeda, sehingga masalah Same Origin Policy dapat ditanggulangi.
Pembuatan anotasi dimulai dari pemilihan teks yang hendak diberi anotasi. Pengguna memilih teks dengan menggunakan mouse dan menekan tombol Create Text Annotation. Sebuah jendela baru akan muncul dan pengguna bisa memasukkan informasi judul dan teks anotasi. Setelah semua informasi dimasukkan, maka informasi tersebut akan diproses dan dibuat format RDF untuk dikirimkan ke server Annotea. Informasi anotasi yang dibuat ditampilkan seperti pada Gambar 5.
Gambar 5 : Informasi Anotasi
Proses pembuatan anotasi sangat bergantung dari nilai xpointer sesuai dengan teks yang diseleksi oleh pengguna untuk menentukan lokasi dari teks yang dianotasi. Implementasi xpointer yang digunakan pada sistem ini adalah milik salah satu proyek open source, yaitu xpointerlib (http://xpointerlib.mozdev.org).
Proses lain yang bisa dilakukan pada sistem ini adalah menghapus anotasi. Sistem akan mencoba mengirimkan HTTP DELETE pada server Annotea dan jika sistem mendapatkan balasan 200, maka berarti informasi anotasi berhasil dihapus dan jika balasan yang diterima adalah 404, maka anotasi tidak ada (kemungkinan sudah terhapus).
Proses terakhir adalah proses update anotasi. Proses update disini akan sama dengan proses pembuatan anotasi baru, hanya saja untuk proses update, alamat URL yang menjadi target saat pengiriman data bukanlah http://annotest.w3.org/annotations, melainkan alamat URL dari annotasi yang lama. Informasi alamat ini diambilkan dari server Annotea ketika halaman ini diproses.