Implementasi Teknologi SVG (Scalable Vector Graphic) dalam

Pembuatan Website

(Studi Kasus : Pembuatan Website untuk Apresiasi Musisi Indie)

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi

untuk memperoleh Gelar Sarjana Komputer

Peneliti:

Anindya Ardiansyah Pratama (672011039)

Ramos Somya, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Oktober 2016

1

2

3

4

5

6

Implementasi Teknologi SVG (Scalable Vector Graphic) dalam

Pembuatan Website

(Studi Kasus : Pembuatan Website untuk Apresiasi Musisi Indie)

1) Anindya Ardiansyah Pratama, 2) Ramos Somya

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50771, Indonesia

Email: 1) 672011039@student.uksw.edu, 2) ramos.somya@staff.uksw.edu

Abstract Indie music was a kind of music that influence in Indonesian music development, where was indie music

not engagement contract with owner of record, so that Indie musicians independent to expression their

music art. The problems which had been around a Indie musicians now is still at the phase to promote

their product, especially when searching, content which too wide and never guided, so that still haven’t

focus on Indie’s music world. Until today, there is still no media that help Indie musicians to give or

promote their product specially. In this research were created a website for Indie musician specially

with applying framework Laravel and technology in website design that is using SVG. The system was

developed using prototyping methods which there are two times evaluation process. Testing result show

that create website can help Indie musician to promote their product with employing searching system

using maps which will be felt more very friendly and can give new nuances in built searching system

more accurate.

Key words : Indie Music, Media Promotions, Framework Laravel, SVG.

Abstrak Musik indie merupakan salah satu jenis musik yang berpengaruh di perkembangan musik

Indonesia, di mana musik indie tidak terikat kontrak dengan para pemilik rekaman, sehingga

musisi indie bebas mengekspresikan seni musiknya. Masalah yang dialami musisi indie saat

ini masih pada tahap mempromosikan hasil karya, terutama pada saat pencarian, konten yang

terlalu luas dan tidak terarah sehingga masih belum fokus pada dunia musik indie. Hingga saat

ini masih belum ada media yang khusus membantu para musisi indie untuk memberikan atau

mempromosikan karyanya ke publik. Pada penelitian ini diciptakan sebuah website khusus

bagi musisi indie dengan menerapkan framework Laravel dan teknologi dalam desain website

yaitu menggunakan SVG. Sistem dikembangkan menggunakan metode prototyping di mana

terdapat dua kali proses evaluasi. Hasil pengujian menunjukkan bahwa pembuatan website

dapat membantu para musisi indie untuk mempromosikan karyanya dengan memanfaatkan

sistem pencarian menggunakan peta yang akan terasa lebih user friendly dan mampu

memberikan nuansa baru dalam membangun sistem pencarian yang lebih akurat.

Kata Kunci: Musik Indie, Media Promosi, Framework Laravel, SVG.

1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya

Wacana Salatiga. 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

7

1. Pendahuluan

Dunia musik saat ini dibagi menjadi 2 jenis manajemen, yaitu indie dan label,

indie sendiri berasal dari kata independen yang berarti semua diproduksi sampai tahap

distribusi dilakukan sendiri oleh musisi. Berbeda dengan label, di mana ada pihak

ketiga yang bekerja sama dengan musisi namun biasanya timbal baliknya adalah

musisi harus memberikan lagu yang tepat untuk pasaran Indonesia saat ini. Musik

indie saat ini menjadi salah satu alat untuk memberikan warna baru dalam dunia musik

Indonesia. Untuk di jaman yang serba modern ini setiap orang bisa mempromosikan

lagunya di Youtube, Facebook dan social media lainnya, namun untuk proses

pencarian masih kurang nyaman, seperti contoh apabila ingin mencari sebuah grup

musik dengan jenis musik dangdut yang berlokasi di Salatiga maupun kota lainnya,

pasti akan susah dan tidak akurat, contoh kekurangan social media lainnya adalah

konten yang terlalu luas dan tidak terarah sehingga masih belum fokus pada dunia

musik indie.

Promosi menjadi masalah paling utama dalam mengembangkan grup musik atau

musisi indie, karena promosi yang tepat akan mampu mengangkat karir musisi indie

dan menghubungkan dengan jaringan baru. Berlandaskan permasalahan yang telah

dijelaskan, dalam penelitian ini akan dibuat sebuah website untuk menjadi wadah bagi

para musisi indie, di mana website ini akan menampung profil dan playlist lagu musisi

tersebut, selain itu, website ini nantinya akan memberikan fitur pencarian dengan

menggunakan peta dan jenis musik masing-masing musisi agar proses pencarian

menjadi mudah, mengingat terkadang susah mengetahui dari mana grup musik ini

berasal dan jenis musiknya seperti apa. Website ini nantinya akan di bangun atas dasar

framework Laravel sebagai kerangka kerjanya sedangkan teknologi SVG (Scalable

Vector Graphic) digunakan untuk tampilan website dan untuk database yang

digunakan adalah MySQL. Framework Laravel memberikan kelebihan pada struktur

yang lebih rapi dibanding dengan framework lainnya, hal ini terlihat dari fasilitas

route, route group, route resource yang memudahkan bagi para penggunanya. Selain

itu framework Laravel juga mendukung Model View Controller (MVC), sehingga

pengembangan website akan menjadi lebih terorganisir dengan baik.

Pada penelitian ini akan berfokus pada user interface, di mana akan di

implementasikan sebuah teknologi dalam web design yaitu SVG. SVG merupakan

sebuah format object citra seperti yang sudah ada saat ini .ai, .psd, .cdr dan lainnya.

Perbedaan SVG dengan format lainnya adalah file SVG dapat dibuka di browser, tidak

seperti .ai yang hanya dapat dibuka dengan Adobe saja. Kemampuan SVG ini dapat

dimanfaatkan dalam pembuatan design komponen website, seperti icon, navigasi,

tombol, dan lainnya. SVG sendiri memiliki struktur yang mirip dengan HTML (Hyper

Text Markup Language) yaitu tersusun atas tag di mana tag ini mepresentasikan

sebuah objek, sehingga memungkinkan untuk CSS (Cascanding Style Sheet) dan

JQuery melakukan animasi dan efek pada setiap tag yang ada di SVG. Pada penelitian

ini SVG akan digunakan untuk membangun sebuah metode pencarian yang akan

memudahkan pengguna dalam menemukan grup musik ataupun musisi indie

favoritnya.

Berdasarkan latar belakang yang telah dijelaskan, didapatkan rumusan masalah

dari penelitian ini yaitu bagaimana mengimplementasikan SVG kedalam sebuah

website. Fokus dari penelitian ini sendiri adalah menyelesaikan masalah yang di hadapi

8

musisi indie saat ini, sehingga penelitian ini sendiri memiliki batasan dalam

pembahasan. Batasan tersebut antara lain kompleksitas sistem dan admin panel di

mana fitur yang akan digunakan masih sebatas registrasi, login, dan CRUD (Create

Read Update Delete) grup musik. Selain itu tidak ada teori khusus yang digunakan

dalam pembuatan web design.

2. Kajian Pustaka

Beberapa penelitian mengenai musik indie telah dilakukan dan banyak dari

penelitian tersebut yang menyebutkan bahwa musik indie dapat membawa sesuatu

yang baru di dunia musik, namun hal ini juga harus di imbangi dengan usaha yang

keras. Penelitian terdahulu yang pertama dilakukan pada tahun 2014 oleh Tri Yanuar

Ahmad, yaitu Pemanfaatan Jejaring Sosial Soundcloud Sebagai Media Promosi Band

Indie MyViolaine Morning. Memanfaatkan jejaring sosial Soundcloud sebagai sarana

promosi, tetapi hanya sebatas suara. Hasil dari kesimpulan yang didapat dalam

penelitian ini adalah soundcloud dapat digunakan untuk tujuan komunikasi melalui

penggunaan internet seperti penyebaran informasi, menciptakan kesadaran, tujuan

riset, meningkatkan pelayanan dan meningkatkan distribusi [1].

Penelitian terdahulu yang kedua dilakukan oleh Gionovan Aesya, yaitu Strategi

internet Marketing Band Indie Pekanbaru dalam Mempromosikan Karya Musik

melalui Reverbnation.com. Musisi indie lebih memilih internet sebagai strategi

promosi untuk merangkul pangsa pasar sendiri di jejaring sosial, dengan

memanfaatkan Reverbnation.com sebagai media promosi. Penelitian ini menggunakan

metode penelitian kualitatif dengan penyajian analisis deskriptif. Pengumpulan data

diperoleh berdasarkan fakta yang terjadi di lapangan melalui observasi, wawancara,

dan dokumentasi [2].

Jika dibandingkan pada penelitian sebelumnya penelitian ini berfokus pada hasil

dari pembuatan website khusus pada musik indie. Sehingga bagaimana pembuatan

website tidak di bahas pada penelitian ini. Selain itu fokus dari penelitian ini adalah

bagaimana membangun sebuah fitur yang tidak dimiliki social media, sehingga hasil

yang diharapkan dari penelitian ini adalah website yang dapat membantu para musisi

indie untuk melakukan promosi lagu dan album melalui website yang user friendly.

SVG (Scalable Vector Graphic) merupakan sebuah format gambar berbasis

vector yang sebenarnya sudah lama ada namun dikarenakan browser yang masih

belum mendukung sehingga SVG mulai dilupakan. Pada tahun 2014 SVG mulai

diperkenalkan kembali dan mulai di pakai dalam proses web design karena sangat

membantu web designer untuk mengeluarkan sisi kreatifnya. SVG mampu

menyuguhkan sebuah object maupun kumpulan object yang di setiap object memiliki

attribute yang dapat diubah. Sebuah file SVG apabila dibuka dengan text editor akan

memiliki struktur yang mirip dengan HTML dimana ada tag , class dan id [3].

9

Kode Program 1 Struktur File SVG

Pada Kode Program 1 dapat dilihat bagaimana struktur file SVG sangat mirip

dengan struktur file HTML 5, di mana terdapat tag, class dan id. Perbedaan dari HTML

dan SVG adalah jenis tag seperti pada SVG digunakan path, dan object.

Gambar 1. Contoh Hasil File SVG

Gambar 1 merupakan hasil apabila struktur file SVG dibuka dan akan terlihat

bahwa SVG mudah di terapkan, tidak seperti pada HTML dimana akan susah dalam

membuat garis. SVG juga memungkinkan untuk menambah efek animasi, selain itu di

dalam SVG dapat juga menambah style CSS inline seperti yang dapat dilakukan pada

file HTML.

Website ini nantinya akan dibangun atas dasar framework. Framework dapat di

artikan sebagai alat yang digunakan untuk membantu dan mempermudah dalam

pembuatan aplikasi dimana dalam konteks ini maka aplikasi adalah website yang akan

dibuat. Framework juga dapat di definisikan sebagai kumpulan script terutama class

dan function yang dapat membantu developer dalam menangani berbagai masalah

dalam pemrograman seperti koneksi ke database, pemanggilan variable dan fungsi-

fungsi lainnya sehingga developer dapat lebih fokus dan lebih cepat membangun

aplikasi [4].

MySQL adalah sebuah implementasi dari sistem manajemen basis data

Relasional Database Management System (RDBMS) yang didistribusikan secara

gratis di bawah lisensi GPL (General Public License). Setiap pengguna dapat secara

bebas menggunakan MySQL, namun dengan batasan perangkat lunak tersebut tidak

boleh dijadikan produk turunan yang bersifat komersial. MySQL sebenarnya

merupakan turunan salah satu konsep utama dalam basis data yang telah ada

sebelumnya SQL (Structured Query Language). SQL adalah sebuah konsep

pengoperasian basis data, terutama untuk pemilihan atau seleksi dan pemasukan data,

1.<html>

2.<body>

3.

4.<svg height="80" width="300">

5. <g fill="none">

6. <path stroke="red" d="M5 20 l215 0" />

7. <path stroke="black" d="M5 40 l215 0" />

8. <path stroke="blue" d="M5 60 l215 0" />

9. </g>

10. Sorry, your browser does not support inline SVG.

11.</svg>

12.

13.</body>

14.</html>

10

yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis

[5].

Laravel merupakan sebuah framework yang sudah hadir sejak tahun 2011 namun

pada saat itu Laravel masih belum menjadi sebuah framework yang cukup dikenal

semenjak pada bulan maret 2015 laravel mulai dinominasikan menjadi framework

terbaik yang dapat disejajarkan dengan framework lainnya seperti framework

Codeigniter (CI), Yii framework. Laravel merupakan framework yang menerapkan

konsep MVC dalam struktur kode nya. Laravel memiliki beberapa fitur teratas seperti,

modularity yaitu dibuat dengan menggunakan top 20 library yang berbeda, dimana

dikombinasikan untuk menjadi sebuah framework. Selain itu Laravel dapat

menggunakan modul lain untuk mendukung kemampuan dan fitur yang diberikan

dengan memanfaatkan instalasi package menggunakan composer kemudian testability

atau bisa diartikan Laravel memungkinkan para pengguna untuk melakukan pengujian

mengenai produk yang akan dibuat. Routing juga merupakan fasilitas yang penting

dimana hal ini dapat membantu developer dalam menentukan kemana website dan

MVC apa yang akan diproses untuk sebuah Uniform Resource Locator (URL). Query

builder pada Laravel memungkinkan pengguna untuk melakukan proses query secara

cepat dan mudah di mana Laravel juga memberikan fitur untuk memodelkan database.

Template Engine yaitu Laravel memberikan fitur untuk adanya template sehingga

memudahkan front end dalam meberikan desain untuk sebuah website [6].

3. Metode dan Perancangan Sistem

Penelitian ini dilakukan, diselesaikan melalui tahapan penelitian yang terbagi

dalam 5 tahapan, yaitu : 1) Analisis kebutuhan dan pengumpulan data, 2) Perancangan

sistem, 3) Perancangan Aplikasi / program, 4) Implementasi dan pengujian sistem serta

hasil pengujian, 5) Penulisan laporan hasil penelitian [7]. Tahapan-tahapan yang

dilakukan dalam penelitian ini dapat dilihat pada Gambar 2.

Gambar 2. Tahapan Penelitian

Tahapan penelitian pada Gambar 2, dapat dijelaskan sebagai berikut. Pada

tahap pertama yaitu analisis kebutuhan dan pengumpulan data, dalam tahap

pengumpulan data dilakukan dengan wawancara secara langsung menggunakan

telepon terhadap ketua asosiasi musik indie di Salatiga yaitu sebagai sampel.

Berdasarkan hasil wawancara maka didapatkan informasi bahwa saat ini musik indie

11

masih kesusahan dalam menghadapi perkembangan jaman yang kian cepat, terutama

untuk daerah kecil untuk dapat menjangkau kawasan luar. Selain terhadap ketua

asosiasi juga dilakukan wawancara secara langsung terhadap para pemilik studio

musik di salatiga yang sudah biasa menangani proses pembuatan album. Pada tahap

kedua hingga ke empat maka akan dilakukan metode pengembangan system dengan

Prototype. Untuk tahap kelima dilakukan penulisan laporan ilmiah dan artikel ilmiah.

Pada tahap kedua akan menggunakan sebuah website yang berbasis Laravel

dikarenakan penggunaan framework Laravel akan membantu dalam proses

pengembangan dikarenakan struktur yang mudah di pahami. SVG yang di angkat pada

penelitian ini akan diletakan pada halaman website utama. SVG akan digunakan untuk

membentuk sebuah peta interaktif, sehingga mampu memberikan kemudahan bagi

para member atau para pengguna dalam mencari grup musik. Peta ini akan terdiri dari

provinsi yang ada di Indonesia.

Metode pengembangan system yang dilakukan dengan metode prototyping,

karena selama proses penulisan melakukan komunikasi kepada para sumber untuk

memberikan bantuan dalam hal fitur dan tampilan. Pengembangan dengan metode ini

dilakukan secara bertahap yaitu dengan membuat sebuah design sederhana dengan

menggunakan HTML 5 untuk memudahkan seseorang melihat kerangka website yang

akan dibuat. Kerangka ini akan di terus dikembangkan untuk dapat menjadi sebuah

website yang sempurna [8]. Tahap-tahap yang dilakukan pada metode prototype

ditunjukkan pada Gambar 3.

Gambar 3. Metode Prototype [8]

Tahap pertama dalam metode prototype adalah dengan cara listen to customer,

tahap ini digunakan untuk mengetahui kebutuhan-kebutuhan yang dibutuhkan para

musisi indie dalam bidang teknologi. Setelah mendapat keseluruhan informasi maka

dapat dilakukan identifikasi apa yang dapat dibuat untuk membantu menyelesaikan

masalah para musisi indie.

Berdasarkan informasi yang diperoleh dari hasil wawancara dengan beberapa

pemiliki studio musik dan ketua asosiasi pemusik indie di Salatiga (sebagai sampel)

yaitu akan ditampilkan dalam list permasalahan dan kebutuhan yang akan di

gambarkan dengan diagram alur pada Gambar 4.

12

Gambar 4. Skema Alur Pemusik Indie

Gambar 4 menggambarkan 3 masalah utama yang dialami oleh musisi indie

adalah yang pertama informasi musisi indie, yang kedua dalam hal promosi, dan yang

ketiga jaringan bisnis. Masalah musisi indie yang pertama adalah banyak musisi indie

yang mengeluhkan bahwa informasi diri mereka sering sekali di pandang sebelah mata

karena menurut mereka hanya berasal dari kota kecil, padahal begitu banyak hal yang

dapat dibanggakan. Tidak adanya informasi grup musiknya merasa bahwa sering kali

dianggap tidak berkelas hanya sebagai grup musik kecil.

Masalah musisi indie yang kedua adalah dalam hal promosi, memang sudah

begitu banyak website dan social media yang menyediakan fasilitas publishing seperti

Facebook atau Youtube namun masih belum ada tempat atau wadah yang spesifik dan

khusus untuk musisi indie dalam menyalurkan hasil kreatifitasnya untuk dinikmati

oleh masyarakat luas.

Masalah Terakhir adalah jaringan bisnis di mana band indie, band yang mandiri,

berdiri sendiri, dari segi pendanaan semua pengeluaran, mulai produksi, pemasaran

sampai distribusinya dilakukan sendiri, sehingga jarang yang memiliki jalur pemasaran

yang kuat. Kondisi mereka saat ini sangat susah dalam menjangkau bisnis yang lebih

besar dikarenakan kalah dengan manajemen label. Tiga masalah tersebut yang sering

dialami oleh musisi indie yang didapat dan diketahui dari hasil wawancara dengan

beberapa pemilik studio dan ketua asosiasi pemusik indie di Salatiga

Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang

digunakan dalam membangun website ini yaitu: analisis perangkat keras yang akan

digunakan adalah Processor Intel Core i5, 2.3 GHz, RAM 4 GB dan Hardisk 1 TB.

Sedangkan perangkat lunak yang digunakan sistem operasi Windows 10, Sublime Text

3, LAMP Server (Apache, MySQL, PHP), Web browser (dalam penelitian ini

digunakan Mozilla Firefox) dan Rational Rose.

Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram UML

(Unified Modeling Language). Diagram UML meliputi use case diagram, dan activity

diagram. Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat,

diantaranya adalah Use case Diagram, Activity Diagram, dan Class Diagram.

13

Gambar 5. Use Case Diagram

Gambar 5 merupakan use case yang menjelaskan bagaimana sistem dibuat.

User memiliki 4 fitur utama, yaitu dapat melihat konten website, menregistrasikan

band mereka, memberikan rate pada band, dan login, di mana setelah login maka user

dapat melakukan perubahan profil band mereka seperti menambahkan lagu,

menambahkan informasi lain. Admin juga memiliki fitur yang sama dengan user

namun yang membedakan adalah admin bisa mengatur tabel member.

Gambar 6. Activity Diagram Pendaftaran Member

Pendaftaran

ke sistem

Memasukan

data band

Admin

mengecek data

tidak valid

valid

adminuser

14

Gambar 6 merupakan Activity Diagram yang menggambarkan proses

pendaftaran member baru, admin akan melakukan pengecekan terlebih dahulu

mengenai data hasil registrasi, apa bila data tersebut tidak valid maka akan kembali ke

langkah awal, sebaliknya bila data sudah valid dan dapat diterima maka admin akan

melakukan approval yang kemudian user dapat memasukan data untuk profil band

mereka, dan setelah pengisian data profil selesai otomatis akan disimpan pada

database system.

Gambar 7. Activity Diagram Admin Mengelola Data List Band

Gambar 7 merupakan Activity Diagram admin untuk mengelola data list band.

Aktivitas dimulai dengan login ke sistem dan kemudian memilih mengelola data list

band, pada data list band terdapat beberapa opsi yaitu tambah, ubah dan hapus. Setelah

mengelola data band dan telah disimpan, otomatis data yang baru akan masuk ke

database dan akan menyimpan perubahan yang sudah dilakukan tersebut.

log in

memilih mengelola

data list band

memilih menu sesuai yang

dibutuhkan edit atau delete

mengelola data list band

menghasilkan data list

band yang baru

pilih save

keluar dari menu

mengelola data list band

log out

menampilkan menu mengelola data profil

band, data rate band, data list band

menampilkan data list band yang sudah

berhasil menjadi member

menampilkan pilihan menu

pengelolaan : edit, delete, save

menyimpan data hasil

pengolahan pada database

menampilkan notifikasi data telah

tersimpan

SistemAdmin

15

Gambar 8. Class Diagram

Gambar 9 merupakan gambaran dari class class yang terdapat pada website ini,

di mana akan terdapat 3 tabel utama yaitu table admin, member dan band. Relasi yang

ada pada Class Diagram ini adalah table member hanya boleh memiliki table band.

Tabel admin akan berisikan informasi seputar admin, table member akan berisikan

informasi seputar member dan table band akan berisikan informasi band yang dimiliki

oleh user.

4. Hasil Implementasi dan Pembahasan

User yang digunakan pada website ini ada dua yaitu admin, dan member

dengan hak akses yang hampir mirip, perbedaannya hanya pada admin dapat

melakukan CRUD terhadap data member serta dapat menghapus data orang lain.

Pada halaman muka maka terdapat 3 section sederhana , dikarenakan pada website ini

masih dalam tahap prototyping. Section pertama berisi teknologi utama yang

digunakan sebagai judul yaitu SVG dalam bentuk sebuah peta, section ke dua berisikan

sejarah dari musik ground serta latar belakang yang ada, dan section yang terakhir

berisikan form pendaftaran untuk band atau musisi indie. Berikut pada Gambar 10

akan diperlihatkan halaman utama website musik ground.

Gambar 9. Halaman Utama Website Musik Ground

16

Berikut adalah kode program untuk memasukan format file SVG ke dalam file

HTML, karena pada website ini menggunakan PHP maka akan digunakan cara

menginput file SVG seperti berikut.

Kode Program 2 Memasukkan SVG ke dalam HTML

Pada Kode Program 2 dapat dilihat, kode tersebut akan memanggil file SVG

yang ada pada folder dan akan ditampilkan pada website, ukuran yang akan di

tampilkan pada layar bergantung pada file SVG yang ada sehingga apabila dalam file

SVG terdapat padding maka gambar yang muncul pada layar pun akan terdapat

padding. Hal ini berbeda dengan file PNG (Portable Network Graphics) yang hanya

menggunakan bagian yang bewarna saja.

Mengingat fleksibilitas file SVG maka file SVG ini dibuat secara manual

dengan menggunakan coreldraw. Berikut adalah tampilan pada saat pembuatan awal

untuk peta.

Gambar 10. Tampilan peta Indonesia dengan coreldraw

Gambar 10 adalah pengambilan vector peta indonesia yang masih bercampur

dan belum terpisahkan. Pada tahap ini akan dilakukan pengambilan object yang

penting dan pemisahan garis antar tiap-tiap provinsi.

0. <div class="main clearfix"> 1. <div class="col-md-10 col-md-offset-1 peta"> 2. <?php echo file_get_contents("mapmusicground.svg");?> 3. </div> 4. <div >

17

Gambar 11. Tampilan peta Indonesia hasil akhir pembuatan SVG

Gambar 11 adalah hasil akhir dari pembuatan SVG untuk peta. Proses ini

merupakan proses yang memiliki tingkat kesulitan, mengingat ukuran SVG sangat

berkaitan dengan ukuran layar, maka pembuatan SVG perlu memiliki proposionalitas

yang sama dengan ukuran layar. Setelah sudah menemukan posisi yang cocok maka

file ini akan diconvert menjadi format SVG.

Mengingat fleksibilitas file SVG maka file SVG ini dibuat secara manual

dengan menggunakan corel, dimana disisipkan attribute tertentu untuk dapat

mengimplementasi file SVG apabila di open dengan text editor. Kode SVG bergantung

pada banyaknya object yang dibuat, setiap line dan warna semuanya memiliki attribute

masing masing. Setiap object pada SVG dapat diberikan attribute diluar file SVG

tersebut, hal seperti ini dilakukan biasanya untuk menambahkan action tertentu seperti

pada yang dilakukan adalah saat melakukan klik pada setiap provinsi.

Kode Program 3 Fungsi Klik JQuery

239. 240. jQuery(document).ready(function($) {

241. 242. var getProvince;

243. $('.genre').click(function(event) {

244. getProvince = $('.genre').attr('class').split(/\s+/);

245. provinceName = getProvince[3];

246. provinceCode = getProvince[2];

247. });

248. });

249. </script> 250. <script> 251. (function() {

252. [].slice.call( document.querySelectorAll( 'select.cs-select' )

).forEach( function(el) {

253. new SelectFx(el);

254. } );

255. })();

256. </script> 257. <script type="text/javascript"> 258. $(document).ready(function() {

259. var classdefault;

260. $('.cs-options li').click(function(event) {

261. 262. if($(this).text()=='Rock'){

263. 264. $('.genre').hover(function() {

265. $(this).css('fill', 'red');

266. }, function() {

267. $(this).css('fill', 'black');

268. });

269. 270. 271. }

18

Pada Kode Program 3 dapat dilihat bahwa tahap dimana melakukan fungsi klik

JQuery untuk sebuah class yang terdapat pada file SVG untuk mendapatkan informasi

mengenai provinsi dan kode provinsi. Pada bagian bawah penulis melakukan kembali

fungsi JQuery untuk memberikan warna pada region object provinsi. Gambar 11 akan

menunjukan apabila region tersebut di klik dan dihover.

Gambar 12. Tampilan Region Bila di Klik dan di Hover

Gambar 12, maka terlihat bahwa pemilihan jenis musik akan berpengaruh pada

warna dari region di peta. Hal ini di tujukan untuk memberikan variasi agar website

juga tidak terlihat membosankan dan dapat terlihat menarik.

Gambar 13. Tampilan Side Menu bila Region di Klik

Gambar 13, Menunjukan sebuah side menu yang akan ditampilkan apabila

region pada peta di klik , dimana sidemenu akan menampilkan informasi provinsi,

jumlah band yang tersedia dan informasi band apa saja yang tersedia pada side menu

tersebut. Pemilihan jenis musik juga akan berpengaruh pada sidemenu.

19

Gambar 14. Tampilan Halaman Login

Gambar 14 menunjukan tampilan saat user akan masuk kedalam halaman

member. Tampilan yang digunakan cukup sederhana dan simple supaya user dapat

merasa nyaman pada saat akan melakukan login ke website.

Gambar 15. Tampilan Halaman Pendaftaran

Gambar 15 berikut adalah tampilan untuk halaman pendaftaran , pada menu

register terdapat opsi yang harus diisi oleh user yang ingin mendaftar member pada

website ini., diantaranya username, password dan confirm password.

Gambar 16. Tampilan Halaman Member Setelah Login

20

Gambar 16 adalah tampilan untuk halaman member setelah login, dimana pada

halaman member terdapat beberapa opsi dalam menu profil yaitu dapat mengisi profil

band, meng ubah profil band, menghapus profil band dan mereset data band.

Gambar 17. Tampilan Halaman Isi Data Profil

Gambar 17 adalah tampilan pada saat member akan melakukan proses

pengisian profil mereka. Ckeditor digunakan dalam memberikan kebebasan saat

mengisi field jenis textarea, dikarenakan profil ataupun deskripsi band akan

menggunakan banyak kata.

Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari aplikasi yang

telah dibuat untuk mencari kesalahan/bug pada sistem. Pengujian aplikasi dilakukan

agar sistem yang dibuat berjalan sesuai dengan yang diharapkan dan dapat memenuhi

kebutuhan pengguna. Pengujian aplikasi ini menggunakan dua teknik pengujian yaitu

pengujian alpha dan pengujian beta.

Pengujian alpha menggunakan metode Blackbox yaitu pengujian fungsi-fungsi

aplikasi secara langsung tanpa memperhatikan alur eksekusi program. Pengujian ini

dilakukan dengan memperhatikan apakah fungsi telah berjalan sesuai rancangan dan

sesuai yang diharapkan. Tabel 1 adalah hasil pengujian dari aplikasi yang telah

dilakukan. Tabel 1 Hasil Pengujian Blackbox

Fungsi yang diuji Kondisi Output yang

diharapkan

Output yang

dihasilkan sistem

Status

Pengujian

Login Username dan password benar

Username dan password

salah maupun kosong

Sukses login

Gagal login

Sukses login

Gagal login

Valid

Pendaftaran Band Click Button Register Sukses tambah data Sukses tambah data Valid

Menampilkan data

Band

Membuka region

kemudian memilih peta

Sukses tampilkan data Sukses tampilkan

data

Valid

Mengisi Informasi Band

Masuk sebagai member pilih isi informasi band

Berhasil mengisi informasi band

Mengubah data

Penguji

Berhasil mengisi informasi band

Mengubah data

Penguji

Valid

Mengedit informasi

band

Masuk sebagai member

pilih edit informasi band

Berhasil mengedit

informasi band

Berhasil mengedit

informasi band

Valid

Menreset informasi

band

Masuk sebagai member

pilih reset informasi band

Berhasil mereset

informasi band

Berhasil mereset

informasi band

Valid

Masuk sebagai admin Masuk ke url khusus

admin

Muncul halaman login

dan berhasil masuk

sebagai admin

Muncul halaman

login dan berhasil

masuk sebagai admin

Valid

21

Berdasarkan pengujian yang dilakukan pada aplikasi website dapat dilihat status

pengujian dari setiap fungsi valid, maka disimpulkan bahwa aplikasi ini berjalan

dengan baik dan sesuai yang diharapkan. Pengujian beta adalah pengujian yang

dilakukan oleh orang yang tidak ikut dalam pembuatan aplikasi atau calon pengguna

aplikasi. Pengujian beta dilakukan dengan menggunakan kuesioner, yaitu dengan

membagikan kuesioner kepada sample user. Sample user berjumlah 30 responden dan

dipilih secara acak, sample user pada pengujian ini adalah masyarakat dan musisi-

musisi indie kota Salatiga dan sekitarnya. Hasil jawaban kuesioner dapat dilihat pada

Tabel 2.

Tabel 2 Hasil Jawaban Kuesioner

No Pernyataan STS TS CS S SS

1 Aplikasi aplikasi ini mudah digunakan 1 0 4 14 11

2 Apakah font dan jenis huruf bisa di baca dengan jelas 0 1 3 15 11

3 Menu-menu pada aplikasi ini mudah dipahami dan tidak

membingungkan

1 0 4 16 9

4 Apakah mudah untuk mengakses dan memahami alur program 0 1 6 10 13

5 Apakah Aplikasi ini bermanfaat bagi musisi indie dalam

mempromosikan lagu-lagunya

0 2 5 9 14

Setelah semua jawaban diketahui maka yang dilakukan adalah menghitung

presentase jawaban responden yang telah mengisi kuesioner. Hasil analisis data untuk

pertanyaan 1 menunjukkan sebanyak 36,67% responden menjawab sangat setuju,

46,67% responden menjawab setuju dan 13,33% responden menjawab cukup setuju.

Jadi disimpulkan bahwa aplikasi ini mudah untuk digunakan.

Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak 36,67%

responden menjawab sangat setuju, 50,00% responden menjawab setuju dan 10,00%

responden menjawab cukup setuju. Jadi disimpulkan bahwa font dan jenis huruf

aplikasi ini dapat dibaca dengan jelas.

Hasil analisis data untuk pertanyaan 3 menunjukkan sebanyak 30,00%

responden menjawab sangat setuju, 53,33% responden menjawab setuju dan 13,33%

responden menjawab cukup setuju. Jadi disimpulkan bahwa menu-menu pada aplikasi

ini mudah dipahami dan tidak membingungkan.

Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak 43,33%

responden menjawab sangat setuju, 33,33% responden menjawab setuju dan 20,00%

responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini membantu dan

mempermudah pengguna dalam mengakses website dan memahami alurnya.

Hasil analisis data untuk pertanyaan 5 menunjukkan sebanyak 46,67%

responden menjawab sangat setuju, 30,00% responden menjawab setuju dan 16,67%

responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini bermanfaat

untuk musisi indie melakukan promosi lagu.

5. Simpulan

Berdasarkan penelitian yang telah dilakukan didapatkan bahwa user mampu

melakukan task yang telah diberikan dengan baik, dari 30 responden maka didapatkan

75% responden mampu melakukan tugas dengan baik dengan menyatakan website ini

mudah dipahami dan bermanfaat bagi para musisi, 15% mengalami kebingungan

dikarenakan masih belum mengenal dunia website, dan 10% tidak menemukan solusi

22

untuk task yang diberikan. Sehingga dapat disimpulkan bahwa website ini membantu

dalam mempermudah musisi indie untuk mempromosikan profil ataupun lagu-

lagunya.

Penggunaan teknologi SVG dalam pembuatan website mampu memberikan

warna dalam membangun user interface dan user experience yang lebih baik dan

sangat membantu terutama untuk memberikan bentuk-bentuk yang tidak

memungkinkan dibentuk dengan menggunakan css, selain itu, SVG memberikan

kemudahan dalam melakukan pengisian effect untuk setiap object yang terdapat di

SVG dikarenakan di dalam SVG terdapat class dan id. Penggunaan SVG dalam peta

memberikan peranan penting dalam proses pencarian lokasi karena selama ini masih

menggunakan text box ataupun opsi. Menggunakan teknologi SVG yang

diimplementasikan ke dalam bentuk peta akan terasa lebih user friendly dan mampu

memberikan nuansa baru dalam membangun sistem pencarian yang lebih akurat

daripada social media lainnya.

6. Pustaka

[1] Tri Yanuar Ahmad. 2014. Pemanfaatan Jejaring Sosial Soundcloud Sebagai

Media Promosi Band Indie MyViolaine Morning.

[2] Gionovan Ayesha. 2016. Strategi internet Marketing Band Indie Pekanbaru

dalam Mempromosikan Karya Musiik melalui Reverbnation.com. Jom fisip Vol.

3 No. 1 – Februari 2016.

[3] Agustinus Heribertus Ng. Pengenalan Format Gambar SVG.

http://www.dumetschool.com/blog/Pengenalan-Format-Gambar-SVG. Diakses

pada 9 oktober 2016.

[4] Isaknudin, Muhammad Surya. 2009. Apa dan mengapa Harus Framework,

http://www.kuliah-informatika.com/2009/10/framework-apa-dan-mengapa-

harus.html. Diakses pada 9 oktober 2016.

[5] Saputra, Agus, 2010, Step By Step Membangun Aplikasi dengan PHP dan

MySQL, Jakarta : elex media komputindo.

[6] jlawrence, Mengenal Framework Laravel. http://laravel.id/mengenal-

framework-laravel/. Diakses pada 9 oktober 2016.

[7] Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer

dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta : Ilmu

Komputer Univesitas Indonesia.

[8] Pressman, R.S. 2001. Software Enginering : A Practitioner's Approach.

Amerika Serikat : R.S. Pressman and Associates.