T1__Full text Institutional Repository | Satya Wacana Christian University: Implementasi Teknologi SVG (Scalable Vector Graphic) dalam Pembuatan Website: Studi Kasus Pembuatan Website untuk Apresiasi Musisi Indie T1 Full text
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
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.
6
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
7
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].
8
Kode Program 1 Struktur File SVG
1.
2.
3.
4.
5.
6.
7.
8.
9.
10. Sorry, your browser does not support inline SVG.
11.
12.
13.
14.
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 fungsifungsi 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,
9
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
10
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.
11
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.
12
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.
user
admin
Pendaftaran
ke sistem
Admin
mengecek data
tidak valid
valid
Memasukan
data band
Gambar 6. Activity Diagram Pendaftaran Member
13
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.
Admin
log in
Sistem
menampilkan menu mengelola data profil
band, data rate band, data list band
memilih mengelola
data list band
menampilkan data list band yang sudah
berhasil menjadi member
menampilkan pilihan menu
pengelolaan : edit, delete, save
memilih menu sesuai yang
dibutuhkan edit atau delete
mengelola data list band
menghasilkan data list
band yang baru
pilih save
menyimpan data hasil
pengolahan pada database
menampilkan notifikasi data telah
tersimpan
keluar dari menu
mengelola data list band
log out
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.
14
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
15
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
0.
1.
2.
3.
4.
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.
16
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.
250.
251.
(function() {
252.
[].slice.call( document.querySelectorAll( 'select.cs-select' )
).forEach( function(el) {
253.
new SelectFx(el);
254.
} );
255.
})();
256.
257.
258.
$(document).ready(function() {
259.
var classdefault;
17
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.
18
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
19
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
Login
Kondisi
Output yang
diharapkan
Sukses login
Output yang
dihasilkan sistem
Sukses login
Gagal login
Gagal login
Sukses tambah data
Sukses tampilkan data
Sukses tambah data
Sukses tampilkan
data
Valid
Valid
Berhasil mengisi
informasi band
Mengubah data
Penguji
Berhasil mengedit
informasi band
Valid
Status
Pengujian
Valid
Pendaftaran Band
Menampilkan data
Band
Username dan password
benar
Username dan password
salah maupun kosong
Click Button Register
Membuka region
kemudian memilih peta
Mengisi Informasi
Band
Masuk sebagai member
pilih isi informasi band
Mengedit informasi
band
Masuk sebagai member
pilih edit informasi band
Berhasil mengisi
informasi band
Mengubah data
Penguji
Berhasil mengedit
informasi band
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
20
Valid
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 musisimusisi indie kota Salatiga dan sekitarnya. Hasil jawaban kuesioner dapat dilihat pada
Tabel 2.
Tabel 2 Hasil Jawaban Kuesioner
No
1
2
3
4
5
Pernyataan
Aplikasi aplikasi ini mudah digunakan
Apakah font dan jenis huruf bisa di baca dengan jelas
Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
Apakah mudah untuk mengakses dan memahami alur program
Apakah Aplikasi ini bermanfaat bagi musisi indie dalam
mempromosikan lagu-lagunya
STS
1
0
1
TS
0
1
0
CS
4
3
4
S
14
15
16
SS
11
11
9
0
0
1
2
6
5
10
9
13
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
21
untuk task yang diberikan. Sehingga dapat disimpulkan bahwa website ini membantu
dalam mempermudah musisi indie untuk mempromosikan profil ataupun lagulagunya.
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.
Gionovan Ayesha. 2016. Strategi internet Marketing Band Indie Pekanbaru
dalam Mempromosikan Karya Musiik melalui Reverbnation.com. Jom fisip Vol.
3 No. 1 – Februari 2016.
Agustinus
Heribertus
Ng.
Pengenalan
Format
Gambar
SVG.
http://www.dumetschool.com/blog/Pengenalan-Format-Gambar-SVG. Diakses
pada 9 oktober 2016.
Isaknudin, Muhammad Surya. 2009. Apa dan mengapa Harus Framework,
http://www.kuliah-informatika.com/2009/10/framework-apa-dan-mengapaharus.html. Diakses pada 9 oktober 2016.
Saputra, Agus, 2010, Step By Step Membangun Aplikasi dengan PHP dan
MySQL, Jakarta : elex media komputindo.
jlawrence, Mengenal Framework Laravel. http://laravel.id/mengenalframework-laravel/. Diakses pada 9 oktober 2016.
Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer
dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta : Ilmu
Komputer Univesitas Indonesia.
Pressman, R.S. 2001. Software Enginering : A Practitioner's Approach.
Amerika Serikat : R.S. Pressman and Associates.
[2]
[3]
[4]
[5]
[6]
[7]
[8]
22
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
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.
6
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
7
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].
8
Kode Program 1 Struktur File SVG
1.
2.
3.
4.
5.
6.
7.
8.
9.
10. Sorry, your browser does not support inline SVG.
11.
12.
13.
14.
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 fungsifungsi 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,
9
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
10
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.
11
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.
12
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.
user
admin
Pendaftaran
ke sistem
Admin
mengecek data
tidak valid
valid
Memasukan
data band
Gambar 6. Activity Diagram Pendaftaran Member
13
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.
Admin
log in
Sistem
menampilkan menu mengelola data profil
band, data rate band, data list band
memilih mengelola
data list band
menampilkan data list band yang sudah
berhasil menjadi member
menampilkan pilihan menu
pengelolaan : edit, delete, save
memilih menu sesuai yang
dibutuhkan edit atau delete
mengelola data list band
menghasilkan data list
band yang baru
pilih save
menyimpan data hasil
pengolahan pada database
menampilkan notifikasi data telah
tersimpan
keluar dari menu
mengelola data list band
log out
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.
14
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
15
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
0.
1.
2.
3.
4.
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.
16
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.
250.
251.
(function() {
252.
[].slice.call( document.querySelectorAll( 'select.cs-select' )
).forEach( function(el) {
253.
new SelectFx(el);
254.
} );
255.
})();
256.
257.
258.
$(document).ready(function() {
259.
var classdefault;
17
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.
18
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
19
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
Login
Kondisi
Output yang
diharapkan
Sukses login
Output yang
dihasilkan sistem
Sukses login
Gagal login
Gagal login
Sukses tambah data
Sukses tampilkan data
Sukses tambah data
Sukses tampilkan
data
Valid
Valid
Berhasil mengisi
informasi band
Mengubah data
Penguji
Berhasil mengedit
informasi band
Valid
Status
Pengujian
Valid
Pendaftaran Band
Menampilkan data
Band
Username dan password
benar
Username dan password
salah maupun kosong
Click Button Register
Membuka region
kemudian memilih peta
Mengisi Informasi
Band
Masuk sebagai member
pilih isi informasi band
Mengedit informasi
band
Masuk sebagai member
pilih edit informasi band
Berhasil mengisi
informasi band
Mengubah data
Penguji
Berhasil mengedit
informasi band
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
20
Valid
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 musisimusisi indie kota Salatiga dan sekitarnya. Hasil jawaban kuesioner dapat dilihat pada
Tabel 2.
Tabel 2 Hasil Jawaban Kuesioner
No
1
2
3
4
5
Pernyataan
Aplikasi aplikasi ini mudah digunakan
Apakah font dan jenis huruf bisa di baca dengan jelas
Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
Apakah mudah untuk mengakses dan memahami alur program
Apakah Aplikasi ini bermanfaat bagi musisi indie dalam
mempromosikan lagu-lagunya
STS
1
0
1
TS
0
1
0
CS
4
3
4
S
14
15
16
SS
11
11
9
0
0
1
2
6
5
10
9
13
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
21
untuk task yang diberikan. Sehingga dapat disimpulkan bahwa website ini membantu
dalam mempermudah musisi indie untuk mempromosikan profil ataupun lagulagunya.
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.
Gionovan Ayesha. 2016. Strategi internet Marketing Band Indie Pekanbaru
dalam Mempromosikan Karya Musiik melalui Reverbnation.com. Jom fisip Vol.
3 No. 1 – Februari 2016.
Agustinus
Heribertus
Ng.
Pengenalan
Format
Gambar
SVG.
http://www.dumetschool.com/blog/Pengenalan-Format-Gambar-SVG. Diakses
pada 9 oktober 2016.
Isaknudin, Muhammad Surya. 2009. Apa dan mengapa Harus Framework,
http://www.kuliah-informatika.com/2009/10/framework-apa-dan-mengapaharus.html. Diakses pada 9 oktober 2016.
Saputra, Agus, 2010, Step By Step Membangun Aplikasi dengan PHP dan
MySQL, Jakarta : elex media komputindo.
jlawrence, Mengenal Framework Laravel. http://laravel.id/mengenalframework-laravel/. Diakses pada 9 oktober 2016.
Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer
dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta : Ilmu
Komputer Univesitas Indonesia.
Pressman, R.S. 2001. Software Enginering : A Practitioner's Approach.
Amerika Serikat : R.S. Pressman and Associates.
[2]
[3]
[4]
[5]
[6]
[7]
[8]
22