PENERAPAN ALGORITMA FORCE-DIRECTED GRAPH
UNTUK PEMBUATAN SITUS MUSIC-MAP
Indra Maryati
Ir. Edwin Pramana, M.AppSc.
Abstrak–Music-map merupakan
salah satu aplikasi berbasis graf
dimana terdapat hubungan antara
musik yang dicari. Music-map
ditampikan secara interaktif karena
penggunaan algoritma Force-
Directed Graph. Selain itu untuk
mencari informasi musik user
biasanya harus membuka berbagai
halaman situs untuk mendapatkan
informasi yang dicari. Aplikasi
music-map yang akan dibuat
merupakan sebuah aplikasi yang
berbasis situs. Situs music-map ini
akan direlasikan hubungan
kemiripan atau similarity yang
didapatkan melalui web service milik
Amazon. Algoritma Force-Directed
Graph juga digunakan sebagai
algoritma dalam penggambaran graf
yang akan digunakan dalam music-
map. Selain itu, user dapat
melakukan pencarian informasi
musik berupa album, lagu, video, dan
lirik secara bersamaan. User juga
dapat mendownload musik yang
diinginkan atau dicarinya tersebut,
memberikan komentar tentang situs,
bahkan user dapat membantu user
dalam proses pengembangan
berikutnya dengan menjawab
kuesioner pada situs ini. Diharapkan
hasil dari Tugas Akhir ini, dengan
penggunaan music-map yang dipakai
dapat membantu pengguna untuk
dapat dengan mudah mencari
hubungan relasi antara musik. Selain
itu, situs yang dibuat ini juga dapat
membantu user untuk mencari
informasi musik yang diinginkan,
1
seperti lagu, album, video, lirik,
bahkan download melalui satu situs
saja tanpa harus membuka berbagai
situs pencarian informasi musik.
Kata Kunci–force-directed graph,
music-map, similarity, graf
I. Pendahuluan
Musik merupakan hal yang sangat
berkembang dalam dunia internet,
tentunya selain penjualan secara
elektronik. Musik di dalam internet
dapat berupa membagikan informasi
tentang lagu, penjualan lagu tersebut,
dan juga dapat dibagi-bagikan secara
gratis melalui internet. Saat ini musik
sebagai salah satu kebutuhan dasar bagi
manusia, hampir semua kegiatan setiap
harinya diiringi dengan musik. Menurut
Aristoteles, musik mempunyai
kemampuan mendamaikan hati yang
gundah, mempunyai terapi rekreatif dan
menumbuhkan jiwa patriotisme.
Sehingga musik digunakan mulai dari
sarana hiburan sampai sarana kesehatan.
Oleh karena itu, pencarian musik yang
efektif dan efisien sangat dibutuhkan.
Internet dapat menyediakan sarana yang
dapat mendukung perkembangan dunia
musik. Pencarian informasi melalui
Internet atau online lebih lengkap
dibandingkan dengan pencarian
informasi secara offline, yaitu dengan
cara pergi ke toko musik. Pembelian
melalui Internet juga memberikan
banyak kelebihan dibandingkan dengan
pembelian melalui toko-toko musik,
diantaranya penghematan waktu dan
material, kerahasiaan pembeli, dan lain- Untuk memenuhi semua kriteria
lain. tersebut, ada 2 prinsip penerapan
Melihat adanya permasalahan sebuah metode FDG. Yang pertama,
tersebut, maka terciptalah ide untuk verteks terhubung dengan sebuah edge
membuat situs music service yang harus digambar dekat satu sama lain
dilengkapi dengan Music-Map dengan dan yang kedua adalah verteks tidak
algoritma Force-Directed Graph yang seharusnya digambar dekat satu sama
dapat membantu penikmat musik dalam lain. Seberapa dekat verteks harus
mencari musik yang diinginkan dan ditempatkan tergantung berapa banyak
informasi seperti lirik dan video yang verteksnya dan berapa besar ruang yang
berhubungan dengan musik tersebut. tersedia.
Pengguna juga dapat dengan mudah
mencari hubungan antara musik yang Algoritma Force-Directed Graph [1]
satu dengan musik lainnya yang 1: area := W * L; {W and L are
direpresentasikan dengan music-map. the width and length of the
frame}
2: G := (V, E); {the vertices
II. ALGORITMA FORCE- are assigned random initial
positions}
DIRECTED GRAPH
3: k := √area/|V|;
Untuk pengaturan tata letak verteks 4: function fa(z) := begin
dalam penggambaran graph, aplikasi ini return z2/k end;
menggunakan metode Force Directed 5: function fr(z) := begin
return k2/z end;
Graph (FDG). Secara umum, metode ini 6: for i := 1 to iterations do
melakukan 3 langkah utama. Langkah begin
pertama adalah melakukan penolakan 7: {calculate repulsive
antar verteks (repulsion force). forces}
Kemudian langkah kedua yaitu gaya 8: for v in V do begin
saling tarik antar verteks yang 9: {each vertex has two
vectors: .pos and .disp}
berhubungan (attraction force). Setelah
10: v.disp := 0;
itu langkah terakhir adalah penggantian 11: for u in V do
posisi lama dengan yang baru. 12: if (u # v) then begin
Tujuan umum metode FDG adalah 13: {∆ is short hand for
bagaimana pengguna seharusnya the difference}
mendapatkan informasi dari sebuah 14: {vector between the
graph dengan tampilan yang lebih positions of the two
vertices)
menarik dan mudah dimengerti.
15: ∆ := v.pos - u.pos;
Beberapa kriteria untuk sebuah 16: v.disp := v.disp +
representasi graph yang baik yaitu: (∆/|∆|) * fr(|∆|)
1. Verteks harus seimbang 17: end
peletakannya pada gambar. 18: end
2. Kemungkinan kecil penyilangan 19: {calculate attractive
antara edge. forces}
20: for e in E do begin
3. Panjang tiap edge harus seimbang.
21: {each edge is an ordered
4. Kesimetrisan pada struktur graf pair of vertices .v
harus divisualisasikan. and .u}
5. Graf harus dibatasi di dalam sebuah 22: ∆ := e.v.pos – e.u.pos;
frame/bingkai. 23: e.v.disp := e.v.disp –
(∆/|∆|) * fa(|∆|);

2
24: e.u.disp := e.u.disp + ActionScript, mengenali control,
(∆/|∆|) * fa(|∆|); container, dan manager yang didesain
25: end
untuk mempermudah pembuatan Rich
26: {limit the maximum
displacement to the Internet Application (RIA).
temperature t} Aplikasi Flex pada umumnya men-
27: {and then prevent from compile hanya satu file .swf yang kemudian
being displaced outside dideploy ke server ketika diminta akan
frame} dijalankan kembali di Flash Player. Tidak
28: for v in V do begin seperti aplikasi yang berbasis HTML, pada
29: v.pos := v.pos + Flex file source code tetap berada pada
(v.disp/|v.disp|) * development machine dan tidak dideploy
min(v.disp, t); ke dalam server produksi. File-file aset
30: v.pos.x := min(W/2, seperti MP3, dokumen-dokumen CSS dan
max(-W/2, v.pos.x)); PNG dapat dimasukkan ke dalam .swf
31: v.pos.y := min(L/2, ataupun diload saat run time. Gambar
max(–L/2, v.pos.y));
dibawah ini merupakan gambar yang
32: end
menjelaskan tentang konsep dasar dari cara
33: {reduce the temperature as
the layout approaches a
kerja Flex atau Flex workflow.
better configuration}
34: t := cool(t);
35: end

III. ADOBE FLEX

Pada dasarnya Flex adalah
kumpulan dari beberapa teknologi yang
membuat kita dapat membangun sebuah
aplikasi yang Flash Player sebagai
compilernya, sebuah runtime
enviroment untuk mewujudkan user
interface dan interactivity yang lebih
baik. Flex telah memberikan pengaruh
terhadap beberapa teknologi dan standar
yaitu seperti MXML, Web Service,
HTTP, Flash Player, dan ActionScript
[2].
Flex merupakan bagian dari Adobe
Flash Platform dimana merupakan
kumpulan teknologi dengan Flash
Player sebagai intinya. Aplikasi-aplikasi
Flex ditujukan untuk menggunakan
Flash Player sebagai compiler yang
berarti Flash Player yang menjalankan
semua aplikasi Flex. Framework dari
Flex terdiri dari Flex class library dan
sekumpulan class ActionScript yang
digunakan dalam aplikasi Flex. Flex
framework yang ditulis secara
keseluruhan dalam bentuk class-class
Gambar 1. Flex Workflow [2]
3.1 Flex Web Service
Web service merupakan sebuah cara
terstandarisasi yang digunakan untuk
mengintegrasikan aplikasi-aplikasi pada
Web dengan menggunakan Extensible
Markup Language (XML), Simple
Object Access Protocol (SOAP), Web
Service Description Language (WSDL),
dan Universal Description Discovery
and Integration (UDDI). XML
digunakan untuk menandai data, SOAP
digunakan untuk mentransfer data,
WSDL digunakan untuk
mendeskripsikan service yang tersedia,
dan UDDI digunakan untuk menyusun
daftar seluruh service-service yang
tersedia. Karena tujuan utama web
service adalah membuat pihak-pihak
mampu berkomunikasi sehingga tidak
diperlukan untuk mengetahui secara
detil tentang seluk beluk sistem pihak
lain di balik firewall.

3
 Komponen web service pada Flex administrator diharuskan melakukan
mengirim dan menerima pesan SOAP proses login terlebih dahulu. 3.Situs
lewat HTTP. Untuk dapat berhubungan user mengakses database situs untuk
dengan web service dan memanggil melakukan proses login dan proses
operasi dari web service maka objek pemberian feedback. Saat user
pada client harus dihubungkan dengan melakukan proses pencarian dan proses
Web Service Description Language download, data ini nantinya juga akan
(WSDL) dari web service dengan cara disimpan didalam database. 5. Untuk
mengisi nilai dari WSDL dari web proses pencarian, situs user melakukan
service dengan URI-nya. pencarian data musik melalui web
service. Web service yang dipakai
adalah web service dari Amazon,
LyricWiki, dan YouTube. Hasil
pencarian melalui web service akan
kembali ditampilkan pada halaman
situs.

V. UJI COBA
Gambar 2. Flex Web Service [3] Setelah melakukan pengembangan
program dilakukan proses uji coba atau
IV. ARSITEKTUR SISTEM testing. Hasil yang diharapakan untuk
uji coba adalah dapat berfungsinya
Pada bagian ini akan dijelaskan aplikasi atau situs dengan baik. Selain
mengenai arsitektu sistem secara umum itu, situs ini juga diharapkan dapat
yang ada pada situs music-map. Desain membantu user atau pengguna dalam
arsitektural dari situs music-map ini melakukan pencarian musik yang
menggunakan database sendiri dan diinginkannya. Segi efektifitas juga
database dari Amazon, LyricWiki, dan diharapkan dapat meningkat, karena
YouTube yang di akses melalui web sebelumnya user harus membuka
service. banyak halaman yang berbeda.
Situs Situs User
Administrat YouTube 5.1 Uji Coba Music-Map
or Music-map diuji coba dengan
3 5
7
1
6
1 melakukan pencarian musik yang akan
1 6 1
YouTube
2 4
5 direpresentasikan dengan menggunakan
Web 1 1 LyricsFly graf atau yang disebut music-map. Uji
Service 8 9
Database 2 coba dilakukan dengan mencari musik
Situs 21 2 2
7 1 4 1 0 dengan jumlah node pada graf sebanyak
LyricsFly
0
Amazon LyricWiki
101 node. Berikut dapat dilihat gambar
dari hasil uji coba tersebut.
8 9 1 1
2 3
Amazon LyricWiki 5.2 Uji Coba Pada Browser Berbeda
Untuk uji coba situs dilakukan pada
Gambar 3. Arsitektur Situs Secara
Umum banyak browser yang berbeda. Hasil
dari uji coba tersebut akan dijabarkan
Sebelum administrator dapat pada tabel dibawah ini.
melihat laporan-laporan tersebut,

4
 VI. KESIMPULAN
Berdasarkan pembahasan yang ada
pada bagian sebelumnya maka dapat
diambil beberapa kesimpulan sebagai
berikut:
 Music-map dengan jumlah node
lebih dari 100, maka akan memiliki
respon yang lambat baik dalam
melakukan pengaksesan data
Gambar 4. Pencarian pada Music-map kembali maupun proses pergerakan
dengan Jumlah Node = 100 graf.
 Pemakaian software Flex dalam
Tabel 1 pembuatan situs membuat tampilan
Hasil Uji Coba Browser situs terlihat lebih interaktif dan
Nama menarik, namun tidak kompatibel
Hasil Keterangan dengan PHP.
Browser
Mozilla Sukses Situs dapat berjalan  Pembuatan situs untuk user dengan
Firefox dengan baik dan menggunakan Adobe Flex 3.0 yang
sesuai dengan yang merupakan tool pembuatan situs
diharapkan. dengan konsep web v2.0 yang
Opera Gagal Aplikasi dapat berbasis Rich Internet Application
menampilkan atau RIA sangat menunjang
halaman situs tampilan interface tapi di sisi lain
beserta dengan supaya dapat beroperasi dengan
aplikasi Flash. baik maka dibutuhkan koneksi
Namun jika aplikasi internet yang stabil dan cepat.
Flash tersebut  Perubahan web service yang sangat
terdapat sebuah cepat. Pada perkembangan situs
operasi untuk yang digunakan yaitu Amazon dan
melakukan akses ke LyricsWiki mengalami perubahan
web service akan struktur dalam pengaksesan atau
muncul pesan error penggunaan web servicenya. Untuk
seperti berikut dapat melakukan akses ke web
“Security error service Amazon dibutuhkan
accessing url”. parameter baru.
Google Sukses Situs dapat berjalan
Chrome dengan baik dan Referensi
sesuai dengan yang
[1] Thomas M. J. Fruchterman & Edward M.
diharapkan. Reingold. Graph Drawing by Force-
Internet Gagal Aplikasi dapat Directed Placement. Software – Practice
Explorer mengakses halaman and Experience, 1991
PHP dengan [2] Chafic Kazoun and Joey Lott.
sempurna, namun Programming Flex 3. O’Reilly Media Inc.
2008
tidak dapat [3] Flex Architecture Fundamental.
mengakses aplikasi http://www.dehats.com/drupal/?q=node/33.
Flash yang ada. 2009

5
[4] Gilmore, W.Jason. Beginning PHP and
MySQL 5: From Novice to Professional,
Second Edition (Paperback). 2004
[5] Yenatan, Yohana. Pembuatan Situs
Bioskop dengan Fasilitas Online Booking
Menggunakan Adobe Flex 2.0. Sekolah
Tinggi Teknik Surabaya. 2008
[6] Korhonen, Chris, David Hassoun, John
Crosby. Creating Mashups with Adobe
Flex & AIR. FriendsofED. 2008
[7] Lin, Chun-Cheng, Hsu-Chen Yen. A New
Force-Directed Graph Drawing Method
Based on Edge-Edge Repulsion.
http://cobra.ee.ntu.edu.tw/~sanlin/sanlin/sli
des/IV2005-EEReplusion.ppt. 2008
[8] Matsubayashi, T., T. Yamada. A Force-
Directed Graph Drawing Based on The
Hierarchical Individual Timestep Method.
http://www.waset.org/pwaset/v21/v21-
39.pdf. 2007
[9] Mueller, Christopher, Douglas Gregor,
Andrew Lumdaine. Distributed Force-
Directed Graph Layout and Visualization.
http://www.osl.iu.edu/publications/prints/2
006/mueller_egpgv06.pdf. 2006
[10] Pulo, K. J. Recursive Space
Decompositions in Force-Directed Graph
Drawing Algortithms.
http://crpit.com/confpapers/CRPITV9Pulo.
pdf. 2006
[11] Reinhardt, Robert, Snow Dowd. Adobe
Flash CS3 Professional Bible. 2007
[12] Tikhonova, Anna, Kwan-Liu Ma. A
Scalable Parallel Force-Directed Graph
Layout Algorithm.
http://vidi.cs.ucdavis.edu/EGPGV08/pages/
tikhonova.pdf
[13] Walshaw, C. A Multilevel Algorithm for
Force-Directed Graph Drawing.
http://staffweb.cms.gre.ac.uk/~c.walshaw/p
apers/fulltext/WalshawTR6000.pdf. 2000