HTML sebagai Sumber Data Mashup
Feri Wijayanto
Program Studi Teknik Informatika, UII
Jl. Kaliurang km 14,5, Yogyakarta
feri.wijayanto@uii.ac.id
Abstrak
Bersamaan dengan perkembangan Web menuju fasa kedua (Web 2.0), aplikasi mashup berkembang dengan pesat seiring dengan sifat Web yang partisipatif dan kolaboratif. Namun perkembangan mashup seakan-akan sangat tergantung dengan web service yang menyediakan data XML. Di lain pihak Web menyediakan data yang sangat besar dalam struktur HTML. Karena fakta tersebut, paper ini ingin mencoba menggali potensi HTML sebagai sumber data untuk aplikasi mashup.
1. Pendahuluan
Seiring dengan perkembangan Web, Web 2.0 mengantarkan Web ke fase kedua evolusinya menuju Web yang partisipatif dan kolaboratif yang memungkinkan terkumpulnya data karena partisipasi banyak pihak. Seiring dengan evolusi tersebut, beberapa teknologi tercipta untuk memfasilitasi paradigm Web 2.0 seperti Blog, RSS, Wiki, Mashup, dan Tag.
Mashup, tanpa mengesampingkan teknologi lain, merupakan teknologi yang menarik karena terkait dengan penggunaan data publik dalam pengembangan aplikasi berbasis web. Namun pada umumnya, mashup menggunakan web service (XML/JSON), RSS (Really Simple Syndication) atau API (Application Programming Interface). Sedangkan pada dasarnya, Web 2.0 telah menyediakan data dalam jumlah besar dalam bentuk HTML seiring dengan tema partisipatif dan kolaboratif yang diusung olehnya.
Paper ini ingin menggali potensi HTML sebagai sebuah sumber data yang dapat digunakan dalam pengembangan aplikasi mashup. Secara lebih lanjut ingin melihat perkembangan aplikasi mashup itu sendiri kaitannya dengan perkembangan Web ke fase ketiga (Web 3.0) dan naiknya layanan ke level pengetahuan.
Bab 1 paper ini akan membahas mengenai pendahuluan, kemudian diikuti dengan Bab 2 yang mengulas mengenai konsep terkait dengan mashup dan data HTML serta XML. Bab 3 dan Bab 4 akan membahas mengenai metode pengambilan data HTML. Bab 5 mengenai masa depan mashup dari sudut pandang Web 3.0. Bab 6 akan membahas mengenai kemungkinan kenaikan level layanan aplikasi mashup dari data menuju pengetahuan. Bab 7 akan mengulas mengenai kesimpulan dari paper.
2. Konsep Terkait
2.1 Mashup
Mashup merupakan sebuah metode untuk menciptakan halaman web atau situs web yang menggunakan kombinasi informasi dan layanan dari berbagai sumber yang berbeda [1]. Dengan kata lain, metode ini cocok untuk aplikasi web yang menggunakan data yang disediakan oleh web lain. Misalkan DocuSign.com yang mengintegrasikan PayPal dengan menggunakan API PayPal dalam mekanisme pembayaran transaksi, ataupun lyricsfeast.com yang menggunakan API Billboard, LyricFind dan YouTube untuk membangun layanan yang diberikan [2].
Banyak sekali arsitektur yang dikembangkan untuk mashup, namun pada intinya terdapat tiga bagian utama yang hampir mirip dengan arsitektur three-tier seperti yang diungkapkan oleh D.Merril dalam artikelnya [3]. Tiga bagian utama tersebut API/penyedia konten, mashup website dan web browser seperti terlihat di Gambar 1 [3][4].
Pengembangan yang dilakukan pada arsitektur mashup biasanya ditujukan untuk memperbaiki bagian mashup website, karena pada bagian itulah proses bisnis utama dilakukan untuk mengintegrasikan data eksternal menjadi sebuah layanan.
2.2 XML dan HTML
XML (Extensible Markup Language) merupakan sebuah format berbasis text sederhana untuk merepresentasikan informasi terstruktur [5]. Karena sifatnya yang sederhana, XML digunakan secara luas untuk pertukaran informasi terstruktur antar program, antar pengguna, antara computer dan manusia baik local dan antar jaringan [5].
Dikatakan dalam standard mengenai desain dan aplikaksi web, HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets) termasuk teknologi inti untuk membangun sebuah halaman web. Sedangkan HTML sendiri merupakan sebuah bahasa untuk mendeskripsikan struktur dari sebuah halaman web [6].
Sehingga pada dasarnya, terdapat perbedaan mendasar antara XML dan HTML, dimana XML ditujukan untuk representasi dan pertukaran data, sedangkan HTML lebih ditujukan untuk representasi struktur dokumen web.
Sebuah dokumen XML pada umumnya sengaja dibuat untuk melakukan pertukaran data ataupun manipulasi data, salah satunya adalah pada pembuatan atau penggunaan web service dalam sebuah aplikasi mashup. Karena kesengajaan ini, data XML pada umumnya tingkat validitas datanya dapat dianggap lebih tinggi dibandingkan dengan data HTML. Di lain pihak, akibat dari sifat partisipatif Web 2.0, halaman web yang strukturnya dibangun dengan HTML memiliki jumlah data yang cukup besar walaupun tingkat validitas datanya dapat dianggap lebih rendah daripada XML karena merupakan hasil partisipasi dari lebih dari satu contributor (blog, media sosial, komentar, dll).
Dari sedikit ulasan mengenai XML dan HTML dapat ditarik kesimpulan bahwa walaupun pada dasarnya berbeda XML dan HTML masih memiliki persamaan terkait dengan penggunaan tag dalam merepresentasikan data karena keduanya masih turunan dari SGML (Standard Generalized Markup Language). Sedangkan perbedaan di antara keduanya dapat diuraikan sebagai berikut,
a. HTML digunakan lebih untuk membangun struktur sebuah halaman web agar data yang ingin ditampilkan dapat disusun secara baik. Di sisi lain, XML tidak digunakan untuk
menampilkan informasi pada halaman web namun lebih pada pertukaran data.
b. Isi dari dokumen XML merupakan data yang memang sudah dipersiapkan oleh sang pemberi layanan data untuk diolah kembali baik oleh manusia ataupun oleh mesin. Sedangkan isi dari dokumen HTML merupakan informasi yang pada dasarnya ditujukan kepada manusia untuk dinikmati. c. Isi dari dokumen HTML banyak yang
subyektif dan berbicara tentang sentiment pribadi akibat dari parsipatif Web 2.0
3. HTML sebagai Teks
HTML merupakan sekumpulan informasi yang disusun ke dalam struktur tag yang kemudian diterjemahkan ke dalam representasi tampilan halaman web. Kode sumber HTML dari halaman web pada dasarnya dapat dilihat pada browser selayaknya teks yang merepresentasikan struktur tag pada halaman web tersebut. Dalam kode HTML tersebut juga terkandung informasi yang ditampilkan pada halaman web namun tercampur dengan tag-tag HTML.
cURL (Client URL Request Library) merupakan sebuah project pembangunan library yang menyediakan antarmuka yang mudah untuk berbagai protocol internet yang umum digunakan [7]. Salah satu kegunaan cURL adalah untuk mengambil isi dokumen pada sebuah alamat URL. Dengan kemampuan tersebut versi text dari sebuah halaman web (dokumen HTML) dapat diambil dan kemudian diolah sesuai dengan keinginan.
Data yang diambil dari alamat sebuah halaman web dengan cURL merupakan dokumen kompleks HTML yang berisi informasi yang diberikan beserta tag-tag yang membungkusnya. Data tersebut perlu diolah untuk menghasilkan data dan informasi yang dibutuhkan dari halaman web tersebut.
Sehingga dengan menganggap HTML sebagai teks, data dimungkinkan diambil dari sebuah halaman web untuk digunakan dalam sebuah aplikasi mashup. Proses yang dapat digunakan dalam pengambilan data di ilustrasikan pada Gambar 2 yang menggambarkan proses request dan response yang terjadi pada aplikasi mashup berbasis web yang menggunakan cURL sebagai metode pengambilan data.
cURL pada dasarnya hanya sebuah library untuk melakukan komunikasi data dan dengan library tersebut source code dari sebuah halaman web dapat diambil seutuhnya. Algoritma untuk melakukan data
retrieval, harus dibuat disesuaikan dengan struktur halaman web yang akan diproses.
Other Web Server
Web Server cURL Data/ Information Retreaval More Process HTTP request HTTP response
Gambar 2. Arsitektur Mashup dengan cURL
4. HTML sebagai XML
XHTML adalah sebuah jenis dokumen yang merupakan pengembangan dari HTML 4 yang berbasis XML dan terutama dirancang agar dapat compatible dengan piranti berbasis XML [8]. Karena XHTML compatible dengan semua piranti berbasis XML artinya adalah XHTML merupakan dokumen HTML yang dapat diproses selayaknya dokumen XML. Lebih jauh berarti bahwa walaupun HTML tidak ditujukan untuk pertukaran data, namun data HTML dapat diambil dan diolah semudah data dalam dokumen XML (XSLT, XQuery, dll).
Dengan adanya standard mengenai XHTML maka dengan menggunakan jenis dokumen ini HTML seolah-olah dapat dianggap sebagai XML seperti telah dijelaskan sebelumnya. Pengambilan data dapat dilakukan lebih mudah tanpa harus melakukan information retrieval dari sebuah text seperti terlihat pada skema yang tergambar pada Gambar 3 .
XHTML XML processor (XSLT, Xquery, XML parser, dll) Data
Gambar 3. Aliran Pengolahan Data XHTML Sebagai contoh sederhana jika terdapat kode XHTML seperti pada
Tabel
1
yang mengandung data mengenai hari di antara tag HTML dan data yang lain. Dari dokumen HTML tersebut kita bisa melakukan transformasi secara mudah agar mendapatkan data hari tersebut dengan menggunakan salah satu piranti pemroses XML, XSLT (Extensible Stylesheet Language Transformations). Dokumen XSLT yang terdapat Tabel 2 akan mengekstraksi data hari ke dalam format XML yang terdapat padaTabel
3
.Tabel 1. Contoh kode XHTML <?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="People.xslt" version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head>
<title> Strict DTD XHTML Example </title> </head>
<body> <p>
Please Choose a Day: <br /><br /> <select name="day"> <option selected="selected">Monday</option> <option>Tuesday</option> <option>Wednesday</option> <option>Thursday</option> <option>Friday</option> <option>Saturday</option> <option>Sunday</option> </select> </p> </body> </html>
Tabel 2. Contoh kode XSLT
<xsl:stylesheet version="1.0" xmlns:xt="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:output method="html" /> <xsl:template match="/"> <days> <xsl:apply-templates select="//xt:option" /> </days> </xsl:template> <xsl:template match="xt:option"> <day> <xsl:value-of select="." /> </day>
</xsl:template> </xsl:stylesheet>
Tabel 3. Contoh hasil dari Transformasi <days> <day>Monday</day> <day>Tuesday</day> <day>Wednesday</day> <day>Thursday</day> <day>Friday</day> <day>Saturday</day> <day>Sunday</day> </days>
Dalam sudut pandang mashup, XHTML merupakan solusi untuk data-data yang sifatnya terbuka namun tidak disediakan dalam format yang bersahabat seperti XML atau sejenisnya. Sehingga tanpa melakukan proses secara tekstual, dengan mudah kita bisa mengambil data pada tag yang diinginkan. Sedangkan di sisi lain, tidak banyak halaman web yang benar-benar valid XHTML implikasinya tidak banyak halaman web yang dapat diproses selayaknya XML secara langsung.
Dengan kondisi tersebut, maka perlu dipastikan bahwa dokumen HTML yang akan diproses adalah dokumen HTML yang sesuai dengan standard XHTML. Sehingga diperlukan sebuah perantara untuk mengubah dokumen HTML agar sesuai dengan standar XHTML sehingga proses yang terjadi seperti pada Gambar 4. HTML to XHTML XML processor (XSLT, Xquery, XML parser, dll) Data HTML
Gambar 4. Aliran Pengolahan data HTML
5. HTML dengan RDF
Pengembangan aplikasi mashup tidak hanya berhenti di Web 2.0. Salah satu komponen Web 3.0, Semantic Web [9], juga merupakan teknologi yang dapat dianggap sebagai pendukung mashup. Semantic web pada dasarnya bertujuan ingin mengubah data tidak terstruktur dan semi terstruktur yang ada di web
menjadi sebuah web of data. Web of data digunakan untuk menghubungkan data-data terstruktur di web dengan memanfaatkan standar-standar tertentu yakni model data RDF (Resource Description Framework) dan Hypertext Transfer Protocol (HTTP) [10].
Web of Data yang menggunakan model Linked Open Data (LOD) memungkinkan data-data di web bertautan penuh arti satu sama lain. Secara spesifik LOD didasarkan pada empat prinsip, yaitu,[11] :
1. Penggunaan URI sebagai nama dari things 2. Penggunaan HTTP URI sehingga pengguna
dapat mencari nama-nama tersebut
3. Informasi yang membantu pada saat pengguna mencari URI, dengan standard (RDF, SPARQL)
4. Pemberian tautan ke URI lain sehingga pengguna dapat menemukan things yang lain. Sehingga dengan Semantic Web, aplikasi mashup dapat dilakukan dengan mekanisme tautan antar data. Didukung dengan pengembangan rekomendasi W3C tertanggal 22 Agustus 2013 mengenai penggunaan RDF di dalam HTML [12], maka pengembangan aplikasi mashup berbasis linked data dapat dilakukan dan akan mulai didukung oleh para pengembang browser.
6. Text Mining
Sebagai akibat dari Web 2.0, selain data yang memang disediakan sebagai lahan informasi seperti portal berita, web profil, ataupun wiki, terdapat data yang dihasilkan dari hasil aspirasi pengguna yang memiliki tingkat subyektivitas dan aktualisasi diri cukup tinggi. Data hasil dari aspirasi tersebut seperti halnya sosial media, blog, forum, dll.
Text mining merupakan sebuah proses ekstraksi dari pengetahuan atau pola yang menarik dari sebuah dokumen teks yang tidak terstruktur. Sedangkan banyak dari data Web termasuk ke dalam data yang tidak terstruktur [13] yang membutuhkan proses untuk menggali pengetahuan yang terkandung di dalamnya.
Text mining merupakan sebuah metode yang memungkinkan mashup dilakukan dalam level yang lebih tinggi. Layanan yang diberikan tidak hanya dalam level data, namun telah dalam level pengetahuan. Untuk memungkinkan aplikasi mashup pada level pengetahuan tersebut dibuat maka aliran pengolahan data HTML dimodifikasi menjadi seperti Gambar 5.
Dimulai dengan pengambilan HTML dan seluruh data yang ada di dalamnya yang kemudian dilakukan pemrosesan awal terhadap HTML dan data yang diperlakukan sebagai data teks. Pemrosesan awal
(preprocessing) ini dilakukan untuk mempersiapkan data yang ingin digali pengetahuannya sebelum proses mining dilakukan. Pengetahuan akan didapatkan setelah proses text mining dilakukan pada data yang telah dipersiapkan.
Text
Preprocessing Text Mining Knowledge HTML
Gambar 5. Aliran Ekstraksi Pengetahuan dari Halaman Web
7. Kesimpulan
Pengembangan aplikasi mashup menggunakan HTML sebagai sumber data sangatlah potensial untuk digali. Dengan begitu besarnya kapasitas data yang dimiliki serta banyaknya metode yang dapat digunakan, membuat mashup dengan data HTML mampu bersaing dengan mashup dengan data XML yang menggunakan web service.
Namun di lain pihak, XML memiliki kelebihan dengan kemudahan pemrosesan data, sehingga metode mashup menggunakan web service memang menjadi pilihan utama.
Dengan adanya XHTML dan HTML+RDF membuat pilihan dalam metode pengembangan aplikasi mashup menjadi lebih beragam dengan kelebihan dan kekurangan masing-masing.
8. Daftar Pustaka
[1] S. Murugesan, “Understanding Web 2.0,” IT Professional, vol. 9, no. 4, pp. 34–41, Jul. 2007. [2] “ProgrammableWeb - Web 2.0 Mashups
Directory,” 2013. [Online]. Available:
http://www.programmableweb.com/mashups/dir ectory/1?maxdays=10&sort=popular2.
[3] X. Liu, Y. Hui, W. Sun, and H. Liang, “Towards Service Composition Based on Mashup,” in 2007 IEEE Congress on Services (Services 2007), 2007, pp. 332–339.
[4] “Mashups: The new breed of Web app,” 24-Jul-2009. [Online]. Available:
http://www.ibm.com/developerworks/library/x-mashups/. [Accessed: 26-Dec-2013].
[5] “XML Essentials - W3C,” 2010. [Online]. Available: http://www.w3.org/standards/xml/core.html. [Accessed: 27-Dec-2013]. [6] “HTML & CSS - W3C,” 2013. [Online]. Available: http://www.w3.org/standards/webdesign/htmlcss. [Accessed: 28-Dec-2013].
[7] “cURL - Frequently Asked Questions,” 2013. [Online]. Available:
http://curl.haxx.se/docs/faq.html#What_is_cURL . [Accessed: 28-Dec-2013].
[8] S. Pemberton, D. Austin, J. Axelsson, T. Çelik, D. Dominiak, H. Elenbaas, B. Epperson, M. Ishikawa, S. Matsui, S. McCarron, A. Navarro, S. Peruvemba, R. Relyea, S. Schnitzenbaumer, and P. Stark, “XHTML 1.0: The Extensible HyperText Markup Language (Second Edition),” 2000. [Online]. Available:
http://www.w3.org/TR/xhtml1/#xhtml. [Accessed: 28-Dec-2013].
[9] V. Shannon, “A ‘more revolutionary’ Web - The New York Times,” 2006. [Online]. Available: http://www.nytimes.com/2006/05/23/technology/ 23iht-web.html?_r=0.
[10] Hendrik, “PENGEMBANGAN APLIKASI WEB MENGGUNAKAN MASH UP DAN MESH UP APPROACH,” in Konferensi Nasional Sistem Informasi, 2011.
[11] T. Berners-Lee, “Linked Data - Design Issues,” 2009. [Online]. Available:
http://www.w3.org/DesignIssues/LinkedData.ht ml. [Accessed: 31-Dec-2013].
[12] S. McCarron, B. Adida, M. Birbeck, G. Kellogg, I. Herman, and S. Pemberton, “HTML+RDFa 1.1,” 2013. [Online]. Available:
http://www.w3.org/TR/rdfa-in-html/. [Accessed: 31-Dec-2013].
[13] R. Kosala and H. Blockeel, “Web mining research,” ACM SIGKDD Explorations Newsletter, vol. 2, no. 1, pp. 1–15, Jun. 2000.
