2009, Samba 2010, Muslik 2009, Saleh 2009, dan Sulistiawan 2012.
2 Dokumen XML yang digunakan pada pola umum
merupakan hasil
penelitian Astriratma
2012, Dillyani
2012, Oktarina 2012, Susanti 2012, Anti
2012, dan Wiraswasta 2012.
3 Masukan terdiri atas satu sampai tiga kata.
I.1.5 Deskripsi Proses Sistem
Tampilan awal dari Sistem KGV ini berupa sebuah canvas kosong, text input
untuk kata, textarea untuk XML, dan beberapa tombol yang digunakan untuk
menjalankan aksi. Apabila masukan berupa kata, akan dicocokkan pada database dan
ditentukan pola XML yang akan digunakan untuk menggambar canvas. Apabila masukan
berupa XML, sistem akan melakukan validasi, parsing,
analisis pola,
dan menggambarkannya ke canvas.
I.2 Tahapan Build or Revise Mock-up
I.2.1 Lingkungan Implementasi
KGV dikembangkan dengan lingkungan piranti keras dengan spesifikasi sebagai
berikut: Prosesor Intel Core i3-2310M, 2.1 GHz.
RAM dengan kapasitas 2 GB. Harddisk dengan sisa kapasitas 350 GB.
Monitor LCD resolusi 1366 x 768 piksel. Keyboard.
Mouse. Piranti lunak yang digunakan pada
pengembangan KGV yaitu: Sistem operasi Microsoft® Windows 7
Ultimate. Web server Apache 2.2.12.
Notepad++ IDE. Bahasa pemrograman PHP.
DBMS MySQL. Penjelajah situs web browser:
Microsoft® Internet Explorer, Chrome, Opera, Mozilla Firefox, Safari.
Antarmuka piranti lunak untuk pengguna yang dibutuhkan KGV sebagai berikut:
Sistem operasi Microsoft® Windows XPVista7, Linux, atau MacOS.
Penjelajah situs
web browser:
Microsoft® Internet Explorer, Chrome, Opera, Mozilla Firefox, Safari.
I.2.2 Perancangan Antarmuka
Perancangan antarmuka sistem KGV dibuat dengan menggunakan Cascading Style
Sheets CSS, JavaScript, Asynchronous JavaScript and XML AJAX, jQuery, dan
Hypertext Markup Language HTML yang dapat dilihat dan diakses menggunakan
penjelajah situs atau web browser. KGV dapat menerima masukan dari mouse dan keyboard.
Aspek interaksi manusia dan komputer harus diperhatikan dalam perancangan antarmuka
KGV. Interaksi manusia dan komputer adalah studi, perencanaan dan desain mengenai cara
manusia dan komputer bekerja bersama sehingga tingkat kepuasan pengguna tinggi.
Tampilan sketsa antarmuka KGV secara umum dapat dilihat pada Gambar 2.
Gambar 2 Sketsa tampilan antarmuka KGV.
I.2.3 Perancangan Kebutuhan Fungsional
Proses pembangkitan word graph dari kata masukan meliputi praproses, pengecekan pada
database, penentuan pola, dan pengubahan label nama pada dokumen XML. Kata
masukan dari pengguna harus dipraproses untuk membatasi nilai masukan pada sistem.
Kata masukan yang diizinkan tidak boleh mengandung karakter selain alfabet kecuali
tanda hubung - yang digunakan untuk kata berulang. Selain itu, masukan tidak boleh
kosong atau hanya mengandung 1 karakter. Fungsi yang digunakan untuk praproses kata
masukan bernama
„cekkata’. Kata masukan akan diproses ke tahapan selanjutnya apabila
keadaan tersebut dipenuhi. Apabila tidak terpenuhi, sistem akan menampilkan jendela
peringatan. Proses ini dilakukan pada sisi client
menggunakan JavaScript.
Fungsi „cekkata’ dapat dilihat pada Lampiran 2.
Kata masukan yang memenuhi keadaan praproses
akan dikirim
ke server
menggunakan fungsi
„doRequest’
Input bar
Canvas Text bar
Upload bar
Error history
Footer Button bar
1 function updatexmlPW,KM,KD{ 2 kata[0]=KM;
3 kata[1]=KD; 4 e_xml=simplexml_load_filexml.
5 PW..xml; 6 hitung tag text
7 index=counte_xml - components - 8 text;
9 m=0; 10 fori=0;iindex;i++
11 { 12 replace= string e_xml -
13 components[0] - text[i] - replace; 14 ifreplace == YES{
15
e_xml - components[0]- 16
text[i] - value = kata[m]; 17
m++;} 18 }
19 e_xml - asXML xml.KM..xml; 20 echo e_xml - asXML ;}
menggunakan AJAX. AJAX adalah suatu teknik untuk membuat halaman web menjadi
lebih cepat
dan dinamis.
AJAX memungkinkan perubahan bagian laman web
tanpa harus me-reload keseluruhan laman saat komunikasi antara client dan server terjadi
Mukhopadhyay, Bharadwaj, Davulcu 2011.
Proses pencocokkan kata masukan dengan database
dilakukan pada
sisi server
menggunakan Hypertext Preprocessor PHP secara tepat sama exact match. PHP adalah
bahasa pemrograman yang digunakan untuk membangun web. Tujuan utama bahasa ini
ialah memudahkan web developer untuk menghasilkan halaman web yang cepat dan
dinamis Bakken et al. 2003.
Masukan yang dikirim ke server akan dihitung jumlah katanya terlebih dahulu.
Apabila lebih dari tiga kata server akan mengirimkan pesan error ke client sehingga
sistem akan menampilkan pesan peringatan. Apabila kata masukan kurang dari empat kata,
kata tersebut akan dicocokkan dengan database. Apabila kata tersebut tidak terdapat
dalam database, sistem akan menampilkan jendela peringatan. Apabila kata tersebut ada
dalam database, sistem akan mencari tipe kata masukan.
Tipe kata
masukan tersebut
digunakan untuk menentukan jenis kata sifat, kata benda, kata kerja, kata keterangan,
preposisi, atau frasa keterangan.
Apabila tipe kata masukan berupa kata sifat, kata benda, atau kata kerja, sistem akan
mencari imbuhan, kata dasar, tipe kata dasar dan keterangan tambahan pada database yang
akan dicocokkan dengan aturan pembentukan word
graph berdasarkan
penelitian sebelumnya. Apabila tipe kata masukan
berupa kata preposisi, sistem akan mencari jenis preposisi tersebut. Terdapat 20 jenis
preposisi berdasarkan penelitian Anggraeni 2009. Untuk jenis preposisi 9 sampai 20,
sistem akan langsung menentukan pola word graph kata preposisi yang sesuai, sedangkan
untuk jenis preposisi 1 sampai 8 sistem akan menampilkan
jendela peringatan
bahwa preposisi tersebut harus ada kata yang
mendahului atau menyertai. Jika masukan berupa kata preposisi jenis 1 sampai 8 dengan
didahului atau disertai kata tertentu, sistem akan mencari pola word graph yang sesuai.
Apabila tipe kata masukan berupa kata keterangan atau frasa keterangan, sistem akan
langsung menentukan word graph yang sesuai.
Setelah mendapatkan pola word graph yang
sesuai, langkah
berikutnya ialah
mengubah label nama pada dokumen XML. Salah satu fungsi untuk mengubah label nama
pada dokumen XML word graph adalah „updatexmlk’.
Fungsi „updatexmlk’
digunakan untuk mengubah label nama pada dokumen XML word graph kata kerja.
Langkah pertama yang dilakukan fungsi ini ialah menghitung banyaknya tag text
untuk melakukan iterasi. Apabila nilai dari tag components.text.replace ialah
“YES”
dan nilai
dari tag
components.text.value ialah
“KK”, nilai tersebut akan diganti dengan kata masukan. Apabila ada tag replace lain
yang bernilai “YES”, nilainya akan diganti
dengan kata dasar dari kata masukan. Proses ini dapat dilihat pada Gambar 3.
Gambar 3 Fungsi updatexmlk. Setelah proses pengubahan label nama
selesai, server akan mengirimkan XML tersebut ke client untuk diproses lebih lanjut.
Pada sisi client, XML tersebut diterima oleh fungsi
„handleResponse’ yang merupakan bagian dari AJAX. Dengan demikian, ketika
eksekusi di server telah selesai sistem akan menampilkan word graph tanpa me-reload
laman web. Proses menggambar canvas berdasarkan XML yang diterima client
menggunakan fungsi
„viewer.parse’ yang telah dibuat pada penelitian Apriana 2012.
Selain menampilkan word graph pada canvas, sistem juga menampilkan XML pada
text bar. Contoh keluaran Word graph dengan kata masukan “bersatu” ditunjukkan pada
Gambar 4.
Gambar 4 Word graph kata masukan bersatu.
Proses pembangkitan word graph dari kata masukan dapat dilihat pada flowchart Gambar
5. Modul viewer word graph Apriana 2012
sudah memiliki fasilitas untuk mengubah label nama pada canvas dengan menggunakan event
double click. Akan tetapi, modul tersebut tidak dapat menyimpan perubahan nilai
komponen text pada dokumen XML. Oleh karena itu, dilakukan penambahan fungsi
sehingga sistem KGV ini dapat menyimpan perubahan nilai tersebut pada dokumen XML
dan langsung ditampilkan pada bagian text bar. Fungsi untuk menjalankan perintah
tersebut ditulis dalam bahasa JavaScript dengan nama
„updatexml’. Dengan demikian, pengguna tidak perlu mengubah dokumen
XML karena
perubahan nilai
tersebut dilakukan oleh sistem secara langsung.
Berdasarkan modul viewer word graph Apriana 2012, terdapat sepuluh pola yang
memerlukan perbaikan. Perbaikan diperlukan karena terjadi kesalahan dalam peletakan
komponen, tidak adanya relasi ke komponen framerelationships, dan relasi tidak
berpanah antar-token. Kesalahan terjadi pada pola kata benda 12, 13, 16, 17, pola kata kerja
9, pola kata keterangan 3, 4, 10, 11, pola frasa keterangan 10. Perbaikan penggambaran kata
benda pola 12, 13, 16, dan 17 dilakukan dengan melakukan parsing pada tag focus
dilanjutkan dengan peletakkan komponen focus. Perbaikan penggambaran kata benda
pola 9 dilakukan dengan menggeser posisi komponen
token apabila
terdapat dua
komponen token yang menumpuk. Perbaikan penggambaran kata
keterangan pola 3 dilakukan dengan mengatur posisi komponen
text agar terletak di bawah komponen token. Perbaikan penggambaran kata keterangan pola
4 dilakukan
dengan mengatur
posisi komponen token dan komponen text agar
terletak di sebelah kiri komponen frame. Perbaikan penggambaran kata keterangan pola
10 dilakukan dengan menggeser posisi komponen text apabila terdapat dua komponen
Gambar 5 Flowchart pembangkitan word graph kata masukan.
text yang
menumpuk. Perbaikan
penggambaran kata keterangan pola 11 dilakukan dengan menambahkan relasi ke
komponen framerelationships dari komponen text.
Perbaikan penggambaran
frasa keterangan
pola 10
dilakukan dengan
menambahkan relasi tak berpanah apabila relasi tersebut menghubungkan antar-token.
Class diagram untuk viewer dapat dilihat pada Lampiran 3.
Selain membangkitkan word graph dari kata
masukan, sistem
KGV dapat
membangkitkan word graph dari masukan XML. Pengguna dapat mengunggah dokumen
XML ke sistem, menyalin dan memindahkan copy and paste, atau mengetik langsung
XML
pada bagian
text bar.
Proses pembangkitan word graph dari masukan XML
tersebut akan melalui praproses terlebih dahulu. Apabila masukan XML kosong,
sistem akan menampilkan pesan peringatan pada error history. Apabila keadaan tersebut
terpenuhi, masukan XML akan divalidasi menggunakan
fungsi „validateXML’.
Apabila struktur dokumen XML benar, XML tersebut
akan di-parsing
pada setiap
elemennya. Komponen yang sejenis tidak boleh memiliki nomor id yang sama. Apabila
terdapat komponen sejenis yang memiliki id yang sama, sistem akan menampilkan rincian
nomor id dan komponen yang duplikat pada error history.
Proses pembangkitan word graph dari pola umum yang telah direkonstruksi oleh Anti
2012, Astriratma 2012, Dillyani 2012, Oktarina
2012, Susanti
2012, dan
Wiraswasta 2012 menggunakan fungsi loadXML. Pengguna harus memilih pola
umum yang akan ditampilkan pada canvas dan menekan tombol
‘Load XML’ pada bagian ribbon bar.
Proses menghapus canvas akan dieksekusi apabila pengguna menekan tombol
„Clear Canvas
’. Ketika pengguna menekan tombol tersebut, sistem akan menjalankan fungsi
„hapus’. Fungsi tersebut mengatur agar sistem menghapus semua objek pada canvas.
Pengguna yang
ingin mengunduh
dokumen XML word graph yang digunakan untuk menggambar canvas harus menekan
tombol „Download XML’. Fungsi ini akan
menampilkan jendela penyimpanan ketika pengguna menekan tombol
„Download XML’. Dengan demikian, dokumen XML yang
digunakan untuk menggambar canvas dapat langsung disimpan ke komputer pengguna
tanpa harus menyalin dan memindahkannya pada editor teks.
Dokumen XML yang diunduh telah ditambahkan
tag positions
untuk menyimpan setiap posisi komponen word
graph pada canvas. Dengan adanya fitur ini, pengguna dapat menyimpan dan menampilkan
kembali word graph yang telah diubah posisinya save and load. Posisi yang
disimpan pada tag positions ialah top, left, dan size untuk setiap komponen focus dan
token, sedangkan untuk komponen text disimpan top dan left. Struktur XML yang
diunduh dapat dilihat pada Gambar 6.
Gambar 6 Struktur XML yang diunduh.
I.2.4 Perancangan Database
