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
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.
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
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
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 styleCSS 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 scriptterutama 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>
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
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.
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.
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
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
menampilkan menu mengelola data profil band, data rate band, data list band
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.
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>
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.
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. TampilanSide Menu bila Region di Klik
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.
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
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
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 sampleuser. Sampleuser 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
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.
![Gambar 3. Metode Prototype [8]](https://thumb-ap.123doks.com/thumbv2/123dok/3539268.1444464/12.595.102.512.297.596/gambar-metode-prototype.webp)
