7
untuk mengetahui apakah prototype yang dibangun telah sesuai dengan kebutuhan pengguna (Pressman 2001). Tahap ini dilakukan melalui proses pengujian. Pengujian pada penelitian ini dilakukan dengan menggunakan metode black box. Metode pengujian black box menitikberatkan pada pengujian fungsi kebutuhan software. Model pengujian ini tidak memerhatikan proses yang terjadi di dalam sistem, tetapi hanya mempertimbangkan hasil keluarannya saja (Pressman 2001). Setelah sistem selesai dibangun, selanjutnya dilakukan proses perhitungan akurasi. Sebanyak 21 dokumen XML untuk pola kata sifat dan 26 dokumen XML untuk pola preposisi dimasukkan ke dalam skenario pengujian, kemudian dihitung tingkat akurasinya. Penghitungan akurasi dilakukan dengan menghitung jumlah pola yang berhasil digambar dan sesuai dengan aturan word graph-nya. kurasi
pola Pola
yang benar yang diuji
HASIL DAN PEMBAHASAN I Iterasi Pertama I.1 Listen to Customer Tahap ini menghasilkan beberapa hal, yaitu deskripsi umum sistem, kebutuhan sistem, batasan sistem, karateristik pengguna, dan deskripsi proses sistem. I.1.1 Deskripsi Umum Deskripsi umum dari Sistem Viewer Modul Word Graph Berbasis XML ini didasarkan pada penelitian yang dilakukan oleh Romadoni (2009) yang berjudul “Pengembangan Sistem Pembentukan Word Graph untuk Teks Berbahasa Indonesia”. Selain itu, dilakukan juga analisis pola word graph dari modul XML kata sifat dan preposisi yang telah dibentuk dan diidentifikasi sebelumnya oleh Astriratma (2012) dan Dillyani (2012). Dari hasil identifikasi, diketahui terdapat 21 pola kata sifat dan 26 pola preposisi dalam bahasa Indonesia. Hasil analisis tersebut kemudian digunakan untuk membuat Sistem Viewer Modul Word Graph Berbasis XML ini. Sistem Viewer Modul Word Graph Berbasis XML digunakan untuk menganalisis kata menggunakan metode Knowledge Graph (KG). Sistem ini akan memunculkan gambar
dari modul XML word graph dari kata sifat dan preposisi. Sistem ini dikembangkan menggunakan bahasa pemrograman JavaScript yang berbasis web dan bersifat open source. I.1.2 Kebutuhan Sistem Sistem Viewer Modul Word Graph Berbasis XML membutuhkan sebuah text field agar pengguna bisa memasukkan modul XML wordgraph yang telah dikembangkan pada penelitian sebelumnya. Sistem ini membutuhkan sebuah server untuk merequest permintaan dan web browser untuk menampilkan hasil penggambaran dari modul XML. Fungsi utama yang dibutuhkan sistem ini adalah fungsi untuk melakukan parsing pada dokumen XML dan fungsi untuk menggambarkan pola ke canvas. I.1.3 Batasan Sistem Batasan-batasan yang terdapat pada sistem ini adalah: Input yang dapat diproses hanya berupa dokumen XML yang sudah memiliki struktur dengan aturan tertentu yang sudah didefinisikan pada penelitian Astriratma (2012) dan Dillyani (2012). Pola yang dapat diproses oleh sistem ini hanyalah satu pola yang dikemas dalam satu dokumen XML. Sistem hanya akan mengeluarkan gambar dari satu pola. Sistem hanya dapat menampilkan gambar dari pola sebuah word graph, namun tidak dapat menyimpannya. Sistem hanya dapat menampilkan pola gambar dalam ruang 2D sehingga pola gambar yang muncul tidak dapat diputar secara 3D. Gambar pola word graph yang terjadi berwarna hitam dan putih saja. I.1.4 Sasaran Pengguna Pengguna Sistem Viewer Modul Word Graph Berbasis XML adalah orang yang sudah memiliki basis ilmu pengetahuan tentang konsep KG. Pengguna sistem ini merupakan advanced user yang sudah memahami arti gambar yang dikeluarkan oleh sistem ini. I.1.5 Deskripsi Proses Sistem Tampilan awal dari Sistem Viewer Modul Word Graph Berbasis XML ini berupa sebuah canvas kosong, text field untuk input XML,
8
dan sebuah tombol untuk submit XML yang sudah dimasukkan ke sistem untuk diproses menjadi gambar. Sistem kemudian akan memroses XML yang telah dimasukkan pengguna, melakukan parsing pada setiap tag, menganalisis pola, dan menggambarkannya ke canvas. I.2 Build Mock-up Pada tahap ini, dilakukan proses perancangan dan implementasi berdasarkan spesifikasi yang diinginkan pengguna. Perancangan dan implementasi terdiri atas dua jenis, yaitu perancangan serta implementasi fungsional dan antarmuka sistem. I.2.1. Perancangan Fungsional Perancangan fungsional meliputi perancangan fungsi-fungsi yang harus ada pada Sistem Viewer Modul XML Word Graph ini. Berdasarkan hasil diskusi dengan pengguna, fungsi yang dibutuhkan oleh sistem ini antara lain fungsi untuk meng-input XML ke sistem, melakukan parsing untuk mengakses nilai yang ada di setiap tag, fungsi setter dan getter untuk melakukan perpindahan komponen, fungsi untuk mengganti teks yang bisa diubah di pola word graph yang telah tergambar, dan fungsi untuk menggambar pola ke canvas.
Gambar 15 Diagram use case.
Proses pertama dari sistem ini adalah penerimaan input XML dari pengguna, yang selanjutnya akan di-parsing. Dokumen XML di-parsing sehingga didapatkan nilai dari setiap tag yang ada. Proses selanjutnya adalah menganalisis setiap tag hasil parsing, dan menggambarnya. Proses berikutnya terjadi ketika pengguna melakukan perubahan terhadap komponen gambar, misalnya melakukan perpindahan,dan mengubah isi teks. Gambar 15 menjelaskan deskripsi Sistem viewer Modul XML Word Graph yang telah digambarkan dalam diagram use case. Diagram alir sistem, dapat dilihat pada gambar 16. I.2.2 Perancangan Antarmuka Perancangan antarmuka Sistem Viewer Modul Word Graph Berbasis XML dibuat dengan Hypertext Markup Language (HTML) sederhana yang dapat dilihat dan diakses menggunakan web browser. Sistem dapat menerima masukan dari mouse dan keyboard. Pada perancangan antarmuka, harus diperhatikan aspek interaksi manusia dan komputer.
Gambar 16 Diagram alir sistem. Interaksi manusia dan komputer adalah studi, perencanaan, dan desain mengenai cara
9
manusia dan komputer bekerja bersama sehingga dicapai kepuasan user yang paling efektif. Seorang desainer interaksi manusia dan komputer harus memahami keinginan, harapan, keterbatasan fisik maupun kemampuan penggunaan komputer, serta karakteristik user (expert atau novice). Desainer juga harus mengerti karakteristik teknis dan batasan hardware serta software komputer (Galitz 2007). Lima faktor yang diukur dalam evaluasi interaksi manusia dan komputer (Shneiderman 1998) adalah: 1
2 3
4
5
Time to learn, merupakan waktu yang dibutuhkan oleh seorang user untuk mempelajari pemakaian sistem serta mengerti sistem. Speed of performance. Rate of error by user adalah rata-rata error yang dilakukan oleh user selama menjalankan tugas. Retention overtime adalah seberapa baik user dapat memelihara pengetahuanpengetahuan tentang sistem selama satu jam. Subjective satisfication adalah kepuasan user dalam menggunakan sistem.
memiliki
dua
leaf
utama,
yaitu
tag
dan tag
.
Struktur pada tag components berisi daftar komponen yang akan digambarkan ke canvas untuk membentuk pola word graph. Komponen tersebut terdiri atas: 1 Focus dengan atribut id merepresentasikan sebuah fokus dalam pola yang digambarkan dengan sebuah persegi yang diarsir. Focus di gambarkan seperti pada Gambar 18.
Gambar 18 Focus token. 2 Token dengan atribut id mewakili token yang ada pada pola (Gambar 19).
Secara umum, sistem ini terdiri atas tiga bagian, yaitu text field untuk input XML, canvas untuk menampilkan pola word graph, dan tombol kontrol. Tampilan antarmuka sistem ini secara umum dapat dilihat pada Gambar 17. Gambar 19 Token. 3 Text dengan atribut id, value, dan replace. Nilai replace hanya ada dua macam, yaitu YES dan NO. Nilai YES menandakan bahwa nilai untuk value dapat digantidengan kata masukan. Pada penelitian ini nilai untuk value dapat diganti dengan kata preposisi atau kata penyerta preposisi atau keduanya tergantung bentuk polanya. Nilai NO pada tag replace menandakan bahwa nilai pada value tidak perlu digantikan. Gambar 17 Sketsa umum antarmuka sistem. I.2.3 Analisis Struktur XML Analisis struktur XML dilakukan untuk memperoleh pola komponen penyusun word graph yang disusun dalam dokumen XML. Dari hasil penelitian sebelumnya (Astriratma 2012 dan Dillyani 2012), dokumen XML pola kata terdiri atas beberapa tag unik. Tag
adalah tag yang berfungsi sebagai root. Tag
4 Relation memiliki atribut id dan type. Relation mendeskripsikan relasi-relasi seperti ALI (alikeness), CAU (causality), SUB (subset), dan lain sebagainya. Relation akan menjadi penghubung dalam leaf relationships untuk menghubungkan token, focus, text, dan frame. 5 Frame mempunyai atribut id dan berisi elemen-elemen yang akan dirangkai di dalam frame tersebut misalnya elemen-
10
elemen yang akan dirangkai di dalam frame adalah text dengan id 1 dan focus dengan id 1, penulisannya menjadi 1 dan 1. Frame dapat dilihat pada Gambar 20. Contoh penulisan aturan XML untuk elemen frame, yaitu: 1 3 2 1
Contoh penulisan dokumen XML untuk pola preposisi 18 adalah: 1 2 1 BE 1 2 2 NEG 1
Gambar 20 Frame. 6 Frame_relationships memiliki atribut id, type, dan token atau frame_relationships lainnya yang disusun di dalam elemen frame. Tidak terdapat relasi yang menghubungkan antar token atau fokus di dalam frame relationships. Contoh pola word graph yang mengandung frame relationships adalah pola wg18 (pola preposisi 18) seperti pada Gambar 21. Frame relationships BE diberi tag yang memiliki id 1, sedangkan tag dengan id 2 diberikan untuk frame relationships NEG (negation of a situation). Masing-masing token yang terdapat di dalam frame relationships BE akan diberi tag relation dengan id 1 dan id 2.
Tag relationships berisi elemen-elemen yang sudah dideklarasikan dalam tag component, namun di dalam tag relationships, yang akan disertakan hanyalah id dari masingmasing komponen. Penulisannya akan langsung digabungkan, contohnya adalah dan . Tag relationships ini mempunyai arah yang menghubungkan relation antarkomponen. Tag digunakan untuk menandakan arah awal dari komponen, sedangkan tag menandakan arah tujuan dari relation. Contoh aturan XML untuk tag yang mempunyai arah adalah: 1 1 1
Gambar 21 Word graph pola preposisi 18.
XML di atas menunjukkan bahwa ada sebuah relation yang diberi id 1 yang akan menghubungkan komponen text yang
11
memiliki id 1 ke sebuah token dengan id 1. Hasilnya terlihat pada Gambar 22.
1 2 3 4 5 6 7 8
Gambar 22 Relasi from text to token. I.2.4. Inisialisasi Input XML Sewaktu page di-load, akan dibuat sebuah sistem rendering terlebih dahulu dengan fungsi onload page. Proses ini dapat dilihat pada gambar 23. 1 function init() 2 { 3 Viewer = new dean.Viewer ("viewer"); 4 }
Gambar 23 Proses me-load sistem rendering. Hal ini dilakukan untuk mempersiapkan DIV HTML yang akan digunakan, yaitu DIV dengan id “viewer”. Pada proses selanjutnya, akan dibuat sebuah canvas yang akan melakukan rendering. Proses ini dapat dilihat pada Gambar 24. 1 this.canvas = new dean.ViewerCanvas(); 2 this.canvas.setLeft(0); 3 this.canvas.setTop(0); 4 this.canvas.setWidth (pasta.webgui.stage.getWidth()); 5 this.canvas.setHeight (pasta.webgui.stage.getHeight()); 6 pasta.webgui.stage.addControl
Gambar 24 Proses menyiapkan canvas. Rendering bisa dilakukan dengan menginput string XML secara langsung ke text field atau melakukan pemanggilan file XML yang telah tersimpan di server. Jika pemanggilan file XML dilakukan, proses yang terjadi adalah request ke server untuk meminta isi dari file tersebut. Isi dari file XML tersebut kemudian akan di-parsing sehingga menjadi string. Proses tersebut dapat dilihat pada Gambar 25. I.2.5 Parsing XML String XML yang masuk, kemudian akan di parsing menggunakan DOM Parser. Prosesnya dapat dilihat pada gambar 26.
parse : function(xml) { this.canvas.parse(trim(xml)); }, load : function(fileName){ if (window.XMLHttpRequest) xhttp = new XMLHttpRequest(); else xhttp = new ActiveXObject ("Microsoft.XMLHTTP");
9
xhttp.open ("GET", fileName, false); 10 xhttp.send(); 11 var xml = xhttp.responseText; 12 this.parse(xml); 13 },
Gambar 25 Proses parsing file XML menjadi string. 1 2 3
parse : function(xml) { this.clear();
4 5 6 7 8
if (window.DOMParser) //FireFox,Chrome,Safari,Opera { parser = new DOMParser(); xmlDoc = parser.parseFromString (xml,"text/xml"); } else // Internet Explorer { xmlDoc = new ActiveXObject ("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(xml); }
9 10 11 12 13 14 15
Gambar
26
Proses parsing menggunakan parser.
XML DOM
Parsing yang pertama kali dilakukan adalah parsing pada tag . Setiap komponen akan dibuatkan objek yang sesuai dengan nama tag tersebut. Properti masing-masing objek akan disesuaikan dengan data dari XML. Proses parsing pada tag dapat dilihat pada gambar 27. Proses berikutnya adalah parsing tag untuk mendapatkan relasi dari setiap komponen. Inti dari proses parsing pada tag ini adalah untuk mendapatkan informasi yang ada dalam tag dan tag dari setiap komponen sehingga dapat terlihat arah relasi. Proses parsing untuk tag dapat dilihat pada Gambar 28.
12
1 2
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
// parsing components var comNode = xmlDoc.getElementsByTagName ("components")[0]; if (comNode != null) { var tokenCount = 0; var focusCount = 0; ... switch (node.tagName) { case "token" : ... break; case "focus" : ... break; case "text" ... break; case "relation" ... break; case "frame" ... break;
Gambar 27
Proses parsing pada tag .
1 2
// parsing relation var relNode = xmlDoc. getElementsByTagName ("relationships")[0];
3 4
.. tag = this.getFirstTag(fromNode);
5 6 7 8 9 10 11 12 13 14 15 16
switch (tag.tagName) { case "textid" : ... break; case "tokenid" : ... break; case "focusid" : ... break; case "frameid" : ... break; }
Gambar 28
Proses parsing pada tag bagian tag .
Proses selanjutnya adalah melakukan parsing pada tag pada bagian tag . Proses ini dapat dilihat pada Gambar 29. I.2.6 Pembentukan dan Peletakan komponen Setelah melakukan parsing pada dokumen XML, didapatkan komponen-komponen penyusun word graph yang akan ditampilkan ke canvas. Komponen tersebut kemudian digambar berdasarkan tag.
1
var toNode = this.getTag (node, "to");
2 3
if (toNode != null) { 4 tag = this.getFirstTag(toNode) switch (tag.tagName) { 5 case "textid" : 6 ... break; 7 case "tokenid" : 8 ... break; 9 case "focusid" : 10 ... break; 11 case "frameid" : 12 ...break; }
Gambar 29
Proses parsing pada tag pada bagian tag .
Komponen yang dibuat pada proses ini adalah focus, token, frame, relation, dan text. Contoh proses untuk membuat komponen focus dapat dilihat pada Gambar 30. 1 init : function() 2 { 3 this._super(); 4 this.setBorderColor("#666666"); this.canvas.style.background = "url(img/dean/focusBg.png)" 5 this.className = "Focus"; 6 },
Gambar 30
Proses pembuatan komponen focus.
Proses selanjutnya adalah peletakan komponen ke dalam canvas. Pertama, dihitung jumlah masing-masing komponen, kemudian komponen tersebut akan digambar ke dalam canvas. Frame akan diletakkan terakhir karena harus dideteksi terlebih dahulu komponen yang ada di dalamnya. Pada proses selanjutnya, setelah semua komponen diletakkan ke dalam canvas, adalah menggambar relation yang menyesuaikan dengan tag dan tag dari masing-masing komponen. Proses ini akan menghasilkan gambar di canvas berupa sebuah pola word graph dari XML yang telah di-input. Contoh XML yang di-input adalah XML untuk preposisi pola 1. Output yang terjadi di canvas ditunjukkan oleh Gambar 31.
Gambar 31 Word graph untuk pola preposisi 1.
13
I.2.7 Implementasi Antarmuka Antarmuka Sistem Viewer Modul Word Graph Berbasis XML ini terdiri atas tiga bagian, yaitu canvas, text field, dan control button. Canvas berfungsi untuk menampilkan gambar dari pola word graph. Text field berfungsi untuk meng-input dokumen XML. Control button merupakan tombol yang bisa di-clik oleh pengguna untuk memulai proses penggambaran pola word graph. Tampilan awal canvas dan text field pada saat perangkat lunak pertama kali dijalankan adalah halaman kosong berwarna putih. Terdapat satu tombol berlabel “update viewer” yang dapat di-clik oleh pengguna pada bagian control button. Antarmuka sistem ini dapat dilihat pada Gambar 32.
Gambar 32 Antarmuka sistem. I.2.8 Lingkungan Implementasi Sistem Viewer Modul Word Graph Berbasis XML ini dikembangkan dengan lingkungan perangkat keras dengan spesifikasi berikut:
Prosesor Intel Pentium Dual Core T2450 2.0 GHz 2MB Cache. RAM dengan kapasitas 3 GB. Harddisk dengan sisa kapasitas 120 GB. Monitor LCD dengan resolusi 1280×800 pixel. Keyboard. Mouse.
Sistem operasi Microsoft® Windows 98/2000/NT/XP/Vista/7, Linux, atau MacOS X;
Web browser berbasis grafis atau teks: Microsoft® Internet Explorer,Netscape® 4 Navigator, Opera, Mozilla Firefox, Konqueror, Nautilus, dan Lynx.
I.3 Customer Test Drives Mock-up Tahap ini adalah tahap pengujian sistem. Pengujian dilakukan oleh pengguna dengan metode black box. Menurut Pressman (2001), black box testing, yang sering dikenal sebagai behavioral testing, adalah suatu proses pengujian berfokus pada fungsi kebutuhan perangkat lunak. Metode ini memungkinkan pengembang perangkat lunak menurunkan sekumpulan kondisi input yang dapat memenuhi seluruh fungsi kebutuhan program. Hasil pengujian menunjukkan kesesuaian hasil yang seharusnya dengan hasil yang didapat melalui proses pengujian. Hasil tersebut kemudian dievaluasi oleh pengguna. Setiap kekurangan sistem yang ditemukan dalam tahap ini selanjutnya diperbaiki hingga kebutuhan pengguna dapat terakomodasi. Pengujian sistem dilakukan dengan menggunakan 21 pola word graph kata sifat dan 26 pola word graph preposisi. Hasil pengujian menunjukkan 21 pola kata sifat, berhasil digambarkan dengan benar. Pada pola preposisi 23 pola yang berhasil digambarkan dengan benar, dua pola digambarkan kurang lengkap, dan satu pola digambarkan salah. Pola yang digambarkan kurang lengkap adalah pola 17 dan 18 yang tidak berhasil digambar frame-nya secara utuh. Pola yang digambarkan salah adalah pola 24. Kesalahan terdapat pada relasi dengan tipe DIS antara token dan focus yang seharusnya tidak memiliki arah. Pola 17, 18, dan 24 yang digambar oleh sistem, masing-masing dapat dilihat pada Gambar 33, 34, dan 35. .
Perangkat lunak untuk server yang dikembangkan memiliki spesifikasi berikut:
Sistem operasi Microsoft® Windows 7 Professional. Web server Apache 2.2.12. Web browser berbasis grafis atau teks: Microsoft® Internet Explorer, Netscape® 4 Navigator, Opera, Mozilla Firefox, Konqueror, Nautilus, dan Lynx.
Antarmuka perangkat lunak untuk klien yang dibutuhkan memiliki spesifikasi berikut:
Gambar 33 Gambar word graph preposisi pola 17.
Gambar 34 Gambar word graph preposisi pola 18.
14
Gambar 35 Gambar word graph preposisi pola 24. II. Iterasi Kedua Iterasi kedua dilakukan untuk memperbaiki kekurangan-kekurangan sistem yang terdapat pada iterasi pertama. Kekurangan yang diperbaiki dalam iterasi kedua ini dititikberatkan pada tahap penggambaran pola word graph. II.1. Listen to Customer Berdasarkan hasil evaluasi yang diperoleh dari iterasi pertama, pengguna menginginkan perbaikan pada penggambaran preposisi pola 17, 18, dan 24. Pengguna juga menginginkan ada interaksi antara pengguna dan gambar word graph di canvas.
pada komponen. Ketika komponen di-click, akan tampil kotak berwarna merah pada sudut komponen tersebut. Event move memungkinkan pengguna untuk memindahkan komponen yang telah dipilih. Bagian komponen yang di-move akan diperiksa terlebih dahulu apakah komponen tersebut merupakan bagian dari frame. Jika komponen tersebut merupakan bagian dari frame, pergerakannya akan dibatasi hanya di area frame saja. Proses perpindahan sebuah komponen juga diikuti proses update dari relasinya. Koordinat dari komponen didapatkan dengan menggunakan fungsi setter dan getter. Event double click memungkinkan pengguna mengubah isi teks pada gambar word graph yang ada di canvas. Teks yang dapat diubah adalah teks yang memiliki nilai YES pada tag . Sistem akan memeriksa apakah teks bisa diganti atau tidak ketika pengguna melakukan aksi double click pada teks. Jika bisa diganti, sistem akan memunculkan kotak dialog seperti pada Gambar 36.
II.2. Revise Mock-up Perbaikan terhadap sistem pada iterasi kedua dilakukan sesuai dengan keinginan pengguna yang didefinisikan pada tahap listen to customer. Tahap ini mengimplementasikan perbaikan penggambaran preposisi pola 17, 18, dan 24 serta menambahkan event handler pada sistem agar pengguna dapat berinteraksi dengan word graph yang sudah tergambar di canvas. Perbaikan penggambaran preposisi pola 17 dan 18 dilakukan dengan melakukan parsing pada tag dilanjutkan dengan mengakses informasi yang ada di setiap tag yang ada dalam tag , seperti tag , , dan tag . Setelah melakukan parsing, proses dilanjutkan dengan pembentukan dan peletakkan komponen. Perbaikan pada pola 24 dilakukan dengan mengimplementasikan relasi tak berpanah pada relasi tipe DIS. Event handler diimplementasikan untuk mengakomodasi keinginan pengguna yang ingin berinteraksi dengan word graph yang tergambar di canvas. Event yang akan diimplementasikan adalah event selection, move, dan double click. Fungsi selection membuat pengguna dapat melakukan click
Gambar 36 Kotak dialog untuk mengubah isi teks. II.3 Customer Test Drive Mock-up Pengujian pada iterasi kedua dilakukan pada penggambaran ulang word graph preposisi pola 17, 18, dan 24. Pada pengujian, didapatkan hasil yang sesuai dengan yang diinginkan pengguna. Gambar dari preposisi pola 17, 18, dan 24 pada iterasi kedua dapat dilihat pada Gambar 37, 38, dan 39.
Gambar 37 Word graph preposisi pola 17 hasil perbaikan pada iterasi 2.
