pembangunan prototipe xtractorz sebagai tools dalam proses

PEMBANGUNAN PROTOTIPE XTRACTORZ SEBAGAI TOOLS
DALAM PROSES KEGIATAN WEB TABLE EXTRACTION
DAN PEMBUATAN MASHUP
Rudy Gultom1), Riri Fitri Sari 2), Bagio Budiardjo 3)
1,2,3)
Departemen Teknik Elektro, FTUI, Jl. Kampus UI, Depok 16424
[email protected], [email protected], [email protected]
ABSTRAK
Dalam paper ini, kami memperkenalkan prototipe sistem aplikasi Xtractorz dengan
GUI nya (Graphical User Interface) sebagai suatu “tools” atau alat bantu bagi
pengguna melakukan ekstraksi tabel data dari suatu halaman web (web table
extraction) diintegrasikan dengan tahapan pembuatan Mashup. Prototipe Xtractorz
saat ini terus dikembangkan dengan pendekatan baru berupa algoritma berbasis
rekursif dilengkapi aturan (rules) yang mengatur proses ekstraksi tabel data dalam
format HTML dari suatu halaman web. Proses ekstraksi dilakukan menggunakan
struktur pemodelan pohon DOM (Document Object Model-Tree), agar prototipe
Xtractorz mampu secara komprehensif melakukan proses indeksing dan parsing
terhadap kode-kode atau tag-tag HTML halaman web yang diekstraksi tabel
datanya. Dalam proses tersebut seluruh tag-tag atau kode-kode HTML
diidentifikasi siapa Node Root, Parent, Child, Sibling dan Leaf nya, kemudian
dikelompokan dalam bentuk array. Proses identifikasi dan pengelompokan
merupakan hal penting untuk kegiatan komputasi atribut atau tabel data, terutama
data dalam jumlah besar. Sedangkan kontribusi utama prototipe Xtractorz adalah
kemampuan membangun pohon DOM secara otomatis berdasarkan hasil indeksing
dan parsing mengacu algoritma dan aturan yang dibuat. Sementara evaluasi
prototipe Xtractorz dilakukan dengan pengujian terhadap contoh sampel target URL
yang berisi tabel-tabel data hasil Pemilu 2009. Hasil pengujian menunjukkan
prototype Xtractorz mampu melaksanakan proses web table extraction dan
pembuatan Mashup secara komprehensif, sekaligus membuat pohon DOM nya
secara otomatis, dan dapat ditampilkan pada layar GUI.
Kata Kunci: Algoritma Xtractorz, Pohon DOM, Web Table Extraction, Mashup
1. Pendahuluan
Dewasa ini halaman web umumnya dibuat
dalam bentuk HTML tidak terstruktur,
berorientasi pada tampilan presentasinya saja
dan belum berbasis database. Sehingga ketika
dilakukan query atau ekstraksi data dalam
jumlah besar terhadap halaman web HTML akan
dibutuhkan waktu dan biaya yang cukup
signifikan. Hal ini dapat terjadi karena proses
ekstraksi data atau tabel data (web table
extraction) masih dilakukan secara manual.
Oleh sebab itu, pengguna membutuhkan
suatu tools untuk melakukan kegiatan web table
extraction, dan sesuai tren pembuat Mashup saat
ini, juga dapat diintegrasikan dengan pembuatan
Mashup [5]. Mashup sendiri merupakan aplikasi
berbasis web yang dapat mengintegrasikan data
atau tabel data hasil ekstraksi berbagai target
halaman web melalui standar tahapan
pembuatan Mashup, yaitu: data retrieval, data
(source) modeling, data cleaning/filtering, data
integration dan data visualization [7,8].
Namun, untuk mengintegrasikan atau
mengkolaborasikan kegiatan ekstraksi tabel data
dengan pembuatan Mashup bukan merupakan
pekerjaan mudah. Beberapa permasalahan
muncul, seperti sulitnya memahami isi konten
HTML yang tidak terstruktur, terdiri dari ratusan
bahkan ribuan tag-tag atau kode-kode HTML
yang harus dipilah serta dianalisis.
Ditambah
permasalahan
restrukturisasi
bentuk HTML tidak terstruktur dengan cara
memodelkannya menjadi bentuk terstruktur,
menggunakan model pohon DOM [11].
Sehingga untuk mengantisipasi permasalahan
diatas, dibutuhkan algoritma yang mampu
menganalisis dan mengindeksing sekaligus
mengelompokkan tag-tag atau kode-kode
HTML sesuai kelompok (node) nya, seperti:
Root, Parent, Child, Siblings dan Leaf.
Pengelompokan ini penting untuk proses
pengintegrasian dan penyimpanan data di dalam
Data Repository.
Sementara permasalahan lainnya adalah
masih dominannya interaksi faktor manusia atau
pengguna di dalam proses web table extraction
sehingga mengakibatkan proses menjadi tidak
efektif dan efisien, terutama ekstraksi data dalam
jumlah besar. Pada beberapa aplikasi sejenis
yang tersedia di Internet, seperti: Mashmaker,
RoboMaker, YahooPipes, Dapper, Karma dan
lainnya, pengguna masih melakukan secara
manual pencarian atau pemilihan tabel data
dalam halaman web [5].
Hal ini tentunya menjadi kegiatan yang
sangat memakan waktu dan biaya, karena
dewasa ini terdapat jutaan bahkan miliaran
halaman web di Internet, berisi data atau tabel
data yang potensial untuk diekstraksi.
Bisa dibayangkan kalau pengguna harus
melakukan ekstraksi data atau tabel data
terhadap puluhan, ratusan hingga ribuan
halaman web yang menjadi target ekstraksi.
Untuk mengatasi permasalahan interaksi
manual tersebut, dalam paper ini kami
mengajukan satu pendekatan baru melalui
pengembangan algoritma dilengkapi aturan
dalam mengekstraksi tabel data di dalam
halaman web, serta mengintegrasikannya dengan
pembuatan Mashup. Pendekatan baru tersebut
kemudian diimplementasikan dalam satu
Prototipe sistem aplikasi Xtractorz.
2. Analisis Algoritma Xtractorz
Dalam paper ini kami memperkenalkan satu
bentuk
pengembangan
algoritma,
yaitu
algoritma Xtractorz. Algoritma Xtractorz ini
sebenarnya
merupakan
pengembangan
algoritma rekursif terdiri dari dua bagian yaitu
basis dan rekurens. Basis merupakan keadaan
penghenti (kondisi stop) dari pemanggilan
sendiri algoritma, sedangkan rekurens adalah
pemanggilan algoritma itu sendiri.
Algoritma berbasis rekursif ini memiliki
fungsi yang dapat memanggil dirinya sendiri,
artinya fungsi tersebut dipanggil di dalam tubuh
fungsi itu sendiri. Fungsi rekursif sangat berguna
apabila diimplementasikan dalam pekerjaan
pengurutan data ke dalam bentuk struktur pohon
(tree structure).
Saat ini algoritma Xtractorz terus
disempurnakan sebagai algoritma induk (core
algorithm) dalam proses kegiatan web table
extraction dari suatu halaman web HTML yang
dikolaborasikan dengan tahapan pembuatan
Mashup [9].
Pada prinsipnya, algoritma Xtractorz di
disain untuk mampu melakukan analisis
terhadap tag-tag atau kode-kode HTML yang
berhasil diekstraksi dari suatu halaman web
target sebagai sumber datanya. Bentuk pseudo
algoritma Xtractorz adalah sebagai berikut:
DomTree($tag,$KodeHtml,$Parent,$Index) {
// Parsing $KodeHtml
$HasilParsing=ParsingKode($tag,$KodeHtml);
// Kondisi Rekursif Berhenti
If (Node($HasilParsing)) {
Exit;
} Else {
// Cari Tag Anak (Child)
$TagAnak=Array();
$TagAnak=CariTagAnak($HasilParsing)
For (i=0;i<count($TagAnak),i++) {
DomTree($TagAnak[$i],$KodeHtmlTagAnak,
$Index,$Index++)
}
}
}
Algoritma Xtractorz dimulai dengan proses
analisa tag-tag atau kode-kode HTML yaitu
dengan cara mengindeksing struktur tabel
datanya dalam kelompok Node Parent, Child,
Sibling
Leaf.
dan
Setelah
berhasil
dikelompokkan selanjutnya algoritma Xtractorz
melakukan pencarian terhadap atribut atau isi
tabel data (cell) di dalam kolom-kolom.
Sesuai
fungsi
rekursifnya,
algoritma
Xtractorz tidak akan pernah berhenti melakukan
pencarian sekaligus mengindeksing seluruh
tabel data HTML sampai menemukan kondisi
stop atau suatu keadaan penghenti.
Kondisi stop dalam kasus ini adalah ketika
algoritma Xtractorz sudah berhasil menemukan
atribut atau isi data dari Node Leaf yang
merupakan simpul terakhir atau jalur terluar
dalam model struktur pohon DOM (Document
Object Model). Selanjutnya, seluruh node-node
yang berhasil ditemukan dan diidentifikasi dari
bentuk struktur HTML akan dikelompokan
dalam bentuk Array.
3. Langkah Algoritma Xtractorz
Berikut langkah dari algoritma Xtractorz:
3.1 Langkah Pertama
Algoritma Xtractorz menentukan tag
HTML awal serta kode HTML nya, dimana
dalam sistem indexing nya akan dibuat
pertamakali Parent: -1 dan Index: 0, dibuat
sebagai urutan ke-1 karena Parent disini tidak
punya orang tua diatasnya atau dengan kata
lain merupakan struktur tertinggi.
3.2 Langkah Kedua
Algoritma Xtractorz melakukan Parsing
terhadap kode-kode HTML yang berhasil
diekstraksi, agar <tag> dan </tag> yang ada
di dalamnya dapat dikeluarkan, sehingga
diperoleh:
<head>..............</head><body></tbody>
3.3 Langkah Ketiga
Algoritma Xtractorz menentukan suatu
kondisi berhenti (stop) dari proses rekursif
dalam algoritma, yaitu kondisi dimana jika
kode HTML sudah tidak memiliki <tag> dan
</tag> lagi, maka dapat dipastikan telah
diperoleh Node Leaf. Selama Node Leaf
belum diperoleh, algoritma rekursif akan
terus melakukan pencarian terhadap tag-tag
lainnya yang merupakan Child dari tag
seperti di langkah pertama, dengan maksud
agar diperoleh:
<head></head>
<body></body>
3.4.3 Proses rekursif tag bagian Table
<tablewidth=”100%”border=”0”>
<tbody><tr><td>...</td><td>...dst...
</td></tr></tbody></table>
3.4.4 Proses rekursif tag bagian Tbody
<tbody><tr><td>...</td><td>...dst..
</td></tr></tbody>
3.4.5 Proses rekursif tag bagian Tr
(Tr untuk kolom header dari Table)
<tr><td>No</td><td>...</td><td>...dst...
</td></tr>
3.4.6 Proses rekursif tag bagian Td
<td>No</td><td>...</td><td>..dst..</td>
<tr><td>...</td><td>...dst..</td></tr>
Seperti telah dijelaskan diatas, fungsi rekursif
algoritma Xtractorz hanya akan berhenti
melakukan pencarian ketika ditemukan atribut
dalam Node Leaf , yang merupakan jalur Node
terluar dari struktur kode HTML. Selanjutnya,
seluruh rangkaian Node yang ditemukan
diindeksing untuk di identifikasi atau ditentukan
siapa Parent, Child, Sibling dan Leaf nya,
kemudian dikelompokan dalam bentuk Array.
Visualisasi algoritma Xtractorz berbasis
rekursif ini muncul dalam Dashboard atau GUI
Xtractorz. Pada layar GUI terlihat seluruh proses
web table extraction dan tahapan pembuatan
Mashup, mulai dari tahap Loading Page dan
Data Retrieval dan tahap lainnya (Gambar 1).
3.4 Langkah Keempat
Algoritma Xtractorz melakukan proses
perulangan seperti pada langkah pertama
untuk setiap Child dari tag yang ada (yang
diperoleh), sehingga diperoleh:
Gambar 1. Layar Dashboard GUI Xtractorz
3.4.1 Proses rekursif tag bagian Head
<head><title>.........</title></head>
3.4.2 Proses rekursif tag bagian Body
<body><tablewidth=”100%”
border=”0”><tbody><tr><td>...
</td><td>...</td><td>..dst..</td>
</tr></tbody></body>
4. Aturan dalam Algoritma Xtractorz
Untuk
mengimplementasikan
algoritma
Xtractorz secara benar atau sesuai dengan
keinginan pengguna, maka dibuat sekumpulan
aturan (rules) sebagai acuan bagi algoritma
Xtractorz melaksanakan tahapan kegiatannya,
dan dibuat dalam notasi sebagai berikut:
tabel data utama, sedangkan tabel data lainnya
menjadi tabel data pendukung.
•
(1) Aturan yang mengatur bahwa setiap kode
atau tag HTML harus dibuka dengan <tag> dan
diakhiri dengan </tag>.
•
(2) •
Aturan yang mengatur bahwa tabel-tabel data
yang berhasil diekstraksi oleh algoritma
Xtractorz akan dibentuk menjadi sebuah struktur
pohon DOM.
•
Aturan yang mengatur bahwa tag <script>
dan </script> di dalam struktur HTML halaman
web dapat diabaikan.
(3) Aturan yang mengatur bahwa tag-tag atau
kode-kode HTML dalam halaman web target
yang berisi kode CSS dapat diabaikan.
•
(4) Aturan yang mengatur bahwa tag-tag atau
kode-kode HTML yang menjadi fokus utama
dalam algoritma Xtractorz adalah tag
<table></table>.
•
(8)
Aturan yang mengatur tabel-tabel data yang
diekstraksi dari target URL harus berbentuk dua
dimensi dan memiliki sedikitnya dua kolom.
•
•
(7) (9)
Aturan yang mengatur bahwa isi konten (sel)
atau atribut di setiap kolom tabel data yang akan
diekstraksi dari halaman web target, tidak boleh
lebih dari 10 kata.
4. Pohon DOM dalam Algoritma Xtractorz
Untuk lebih memperjelas bagaimana konsep
pohon
DOM
diimplementasikan
dalam
algoritma Xtractorz, maka digunakan satu
alamat URL (http://partai.info/pemilu2009/)
sebagai sampel halaman web target yang akan
diekstraksi tabel datanya (lihat Gambar 2).
(5)
Aturan yang mengatur jika terdapat dua tabel
data atau lebih, maka setiap tabel data yang
memiliki atribut yang sama di masing-masing
kolom tabel data akan menjadi primary key.
•
PrimaryTable Aturan yang
dua tabel data
pertama yang
Xtractorz secara
(6) mengatur bahwa jika terdapat
atau lebih, maka tabel data
ditemukan oleh Algoritma
otomatis diidentifikasi sebagai
Gambar 2. Tabel Data Sumber (Table 1 dan 2)
Seperti diketahui, pendekatan dengan model
struktur pohon DOM digunakan karena
merupakan cara paling efektif mengidentifikasi
tag-tag atau kode-kode HTML yang akan
diekstraksi datanya. Dengan menggunakan
model pohon DOM, secara mudah ditemukan
jalur Xpath untuk mengidentifikasi tag-tag mulai
dari jalur terdalam hingga terluar, atau mulai
dari Node tertinggi Root, Parent, Child, Sibling
sampai Leaf nya [2].
Sebagai contoh, dalam gambar 3 terlihat
jalur XPath untuk kolom “Partai Politik”
(/tbody/tr[1]/td[2]) berarti jalur path yang ada
dimulai dari path: tbody, yang merupakan tag tr
pertama, kemudian ke tag td kedua, dan
kemudian mengambil seluruh isi atau atribut
dari Node Leaf yang teridentifikasi.
Xtractorz para pengguna dapat secara mudah
mengekstraksi data-data atau tabel-tabel data
relevan dari beragam sumber halaman web
sekaligus membuat Mashup nya, tanpa dituntut
keharusan memiliki keahlian di bidang
pemprograman komputer. Disain arsitektur
prototipe Xtractorz dapat dilihat pada Gambar 4.
Gambar 4. Sistem Arsitektur Prototipe Xtractorz
Gambar 3. Implementasi DOM Tree
Sementara untuk menemukan jalur path yang
paralel, dilakukan generalisasi path dengan cara
mengabaikan jumlah Node Leaf yang ada,
contohnya: /tbody/tr/td/ terdiri dari dua
kelompok Node Leaf yaitu kelompok
/tbody/tr[1]/td[1] dan /tbody/tr[2]/td[2].
Selanjutnya, prototipe Xtractorz melakukan
ekstrakasi dari dua tabel data berisi data-data
relevan sesuai keinginan pengguna, yaitu:
“Nama Partai Politik”, Jumlah Suara”,
“Persentase”,
“Jumlah
Perolehan
Kursi
Parlemen” dan sebagainya (Gambar 2 dan 3).
Kemudian dilakukan ekstraksi pada kolom
pertama dari tabel data terkait, dilanjutkan
ekstraksi
pada
kolom-kolom berikutnya
berdasarkan posisi kolom pertama tersebut.
Sesuai
fungsi
rekursifnya,
algoritma
Xtractorz baru akan berhenti ketika kondisi stop
telah terpenuhi, yaitu telah ditemukannya atribut
dalam Node Leaf dari satu jalur XPath yang
diproses.
5. Prototipe Xtractorz dan GUI
Xtractorz adalah sebuah “tools” berupa
prototipe sistim aplikasi dengan Graphical User
Interface nya yang sedang terus dikembangkan,
agar mampu mengintegrasikan proses web data
extraction dan pembuatan Mashup. Prototipe
Xtractorz dibuat dengan bahasa PHP dan AJAX.
Diharapkan dengan menggunakan prototipe
Sedangkan ruang lingkup prototipe Xtractorz
dijabarkan dalam tahapan sebagai berikut:
• Pada tahap awal (loading page), prototipe
Xtractorz akan mencari halaman web (URL)
yang dijadikan target ekstraksi oleh
pengguna, kemudian dilakukan retrieval
terhadap tabel data dalam format HTML
yang tidak terstruktur (tahap data retrieval).
• Tahap berikutnya tahap data modeling,
dimana tabel data berupa tag-tag HTML hasil
retrieval kemudian di restrukturisasi struktur
tabelnya dengan cara di parsing setiap
elemen data atau atribut yang terdapat dalam
kolom tabel data tersebut menggunakan
struktur model pohon DOM.
• Selanjutnya, tahap data cleaning/ data
filtering, yaitu tahap “pembersihan” atau
“pengkoreksian” terhadap atribut-atribut
yang telah berhasil retrieve, serta tersimpan
dalam data repository, untuk diintegrasikan
pada tahap selanjutnya.
• Pada tahap data integration, terjadi proses
integrasi data, dengan cara mengintegrasikan
seluruh atribut tabel data hasil ekstraksi atau
retrieve terdahulu dengan atribut tabel data
hasil
ekstraksi
terbaru,
kemudian
dikelompokan pada satu tabel baru
terstruktur dalam database MySQL. Pada
tahap data integration berlaku formula [7]:
(10)
Dimana,
V
: adalah set of values dari kolom baru.
S
: adalah set of all available data
sources dalam data repository.
att(s) : adalah sebuah prosedur untuk mengembalikan set of attributes dari
sumber s, dimana s S
val(a,s): adalah prosedur mengembalikan
set of values terkait dengan atribut a
dalam sumber s.
R
: merupakan candidate set yang telah
Diranking oleh sistem
• Tahap data visualization, merupakan tahap
akhir dari rangkaian tahapan pembuatan
Mashup, disini seluruh tabel data dan atribut
yang telah terintegrasi dalam data repository
ditampilkan
dalam
beragam
bentuk
visualisasi, seperti: tabel, grafik, web
browser, peta (map) halaman web dan
lainnya [8]. Visualisasi prototipe Xtractorz
dapat dilihat pada Gambar 5.
Application
Retrieval
Modeling
Cleaning
Integration
Popfly
Widgets
Manual
Widget
Widget
Marmite
Widgets
Manual
Widget
Widget
Yahoo’s
Pipes
Mashmaker
Widgets
Manual
Widget
Widget
Dapper
Manual
Widget
Expert
Simile
DOM
Manual
N/A
N/A
Dapper
DOM
Manual
Manual
Manual
Xtractorz
DOM
Auto
Auto
Auto
Apabila dibandingkan dengan sistem aplikasi
sejenis lainnya (Tabel 1) [8], yang juga
menggunakan konsep pohon DOM dan tahapan
Mashup, seperti: Popfly, Marmite, YahooPipes,
Mashmaker, Simile, Dapper dan lainnya [5],
terlihat bahwa tahapan proses mulai dari data
retrieval hingga data integration masih
dilakukan secara manual, bahkan ada yang tidak
meyediakannya sama sekali (N/A atau Not
Available).
Sedangkan prototipe Xtractorz, sebagai
kesimpulannya, mampu melaksanakan seluruh
rangkaian proses web table extraction dan
pembuatan Mashup secara lengkap, sekaligus
membuat pohon DOM nya secara otomatis
(Gambar 1, 2 dan 5).
7. Daftar Pustaka
Gambar 5. Visualisasi dalam bentuk Tabel .pdf
6. Hasil Evaluasi dan Kesimpulan
Dari hasil evaluasi pengujian prototipe
Xtractorz, termasuk algoritma berbasis rekursif
serta aturan dan sistim pemodelan pohon DOM,
prototipe Xtractorz mampu menyelesaikan
secara lengkap seluruh rangkaian proses web
table extraction yang terintegrasi dengan
pembuatan Mashup.
Hasil evaluasi terpenting adalah kemampuan
prototipe Xtractorz membangun model pohon
DOM secara otomatis di layar GUI berdasarkan
hasil indeksing dan parsing terhadap struktur
tag-tag atau kode-kode HTML halaman web
yang menjadi sumber ekstraksi.
Tabel 1. Hasil Evaluasi (N/A: Not Available)
System
Data
Retrieval
Data
Source
Data
Cleaning
Data
Integration
[1] C.A. Knoblock, K. Lerman, S. Minton, and I.
Muslea, Accurately and reliably extracting
data from the web: A machine learning
approach, Intelligent Exploration of the Web,
Springer-Verlag, Berkeley, CA, 2003.
[2] HTML Dom Node Tree,
http://www.w3schools.com/htmldom/
dom_nodetree.asp.
[3]Jeffrey Wong, Jason I. Hong, Making
Mashups with Marmite: Towards End-User
Programming for the Web, Human-Computer
Interaction Institute, Carnegie Mellon
University, Pittsburgh, 2009.
[4] Lukáš Ba inka, Ivan Jelínek, Data Extraction
By
Visual
Matching,
International
Conference on Computer Systems &
Technologies, CompSysTech 2009.
[5] Mashup Maker Tools,
http://mashable.com/2007/07/08/mashups/.
[6] R.Baumgartner, S.Flesca, G.Gottlob, Visual
Web Information Extraction with Lixto,
Proceedings of the 27th International
Conference on Very Large Data Bases,
p.119-128, 11-14 September, 2001.
[7] R. Tuchinda, P. Szekely, C.A. Knoblock,
Building Data Integration Queries by
Demonstration, In Proc. of IUI, 2007.
[8] Rattapoom Tuchinda, Pedro Szekely, and
Craig A. Knoblock, Building Mashup by
Example, Information Science Institute,
University of Southern California, IUI'08,
Maspalomas, Gran Canaria, Spain, January
13-16, 2008.
[9]Rudy Gultom, Riri Fitri Sari, Bagio
Budiardjo,
Implementing
Web
Data
Extraction and Making Mashup with
Xtractorz, Proceedings of 2010 IEEE 2nd
International
Advance
Computing
Conference, p.385-393, 2010.
[10] W3C, XPath, (XML Path Language)
http://www.w3.org/TR/xpath.
[11] W3C DOM, Technical Committee,
Document object model technical reports,
http://www.w3.org/DOM/DOMTR, 2003.