## Perancangan Online Virtual Gallery Dengan Memanfaatkan Teknologi HTML5
1) Griko  Stefan  Tambahani, 2) Michael  Bezaleel  Wenas, 3) Ramos  Somya
Fakultas Teknologi Informasi Universitas  Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia Email : 1) grikostefan@gmail.com, 2) michael.bezaleel.wenas@gmail.com,
3) ramos.6005@gmail.com

## Abstract
Visual  Communication  Design  is  a  Department  in  Information Technology  Faculty. Annually,  this  study  program  conducts  several exhibition events. However, there is a big problem in it that is no storage to store files of student works that usually are often damaged or vanished.
By  this  research  the  researcher  created  an  Online Virtual  Gallery  with the newest technology called HTML5 that use to store the files, such as: drawings,  paintings,  sketches,  videos,  games,  etc.  For  the  result,  this research produced a virtual container that able to accommodate the works of DKV student, so that by this application expectantly could be help the student to store their exhibition files.
Keywords : HTML5 , Visual  Communication  Design , Online  Virtual Gallery

## 1. Pendahuluan
Perkembangan teknologi informasi semakin pesat hingga saat ini dengan terus dikembangkan teknologi-teknologi yang mendukungnya. Salah satu teknologi yang berkembang sangat pesat saat ini adalah HyperText Markup Language 5 ( HTML
5). Pengembangan HTML 5 merupakan perbaikan dari teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
Saat ini, dengan makin banyaknya website yang sudah menerapkan teknologi HTML 5, maka muncullah konsep dan aplikasi berupa e-commerce , e-community dan website yang mengutamakan teknologi multimedia lainnya. Bertujuan agar produk ataupun jasanya dapat dipromosikan secara lebih luas.
Desain Komunikasi Visual (DKV) merupakan salah satu program studi di Fakultas Teknologi Informasi (FTI) yang memadukan teknologi informasi, seni, dan kreatifitas dalam bentuk konsep sampai implementasi desain yang dinamis, variatif, kreatif dan inovatif. Pemanfaatan teknologi HTML 5 ini untuk menjadi media promosi teknologi informasi telah banyak membantu dan memudahkan berbagai proses pameran serta promosi yang lebih luas dibanding pameran yang sifatnya temporer
Jurnal Teknologi Informasi-Aiti, Vol. 14. No.1, Februari 2016 : 1 - 103
( Temporary Exhibition ). Sebagai sebuah organisasi pendidikan yang bergerak dalam bidang seni, DKV membutuhkan suatu sistem yang dapat menyimpan karya serta sekaligus sebagai ajang promosi.
Salah satu persoalan utama yang dihadapi Program Studi DKV menurut hasil wawancara dengan beberapa dosen DKV adalah masalah sering rusak bahkan hilangnya karya-karya yang sebelum ataupun sudah selesai dipamerkan. Kurang amannya karya pameran ini disebabkan oleh beberapa faktor, antara lain : tidak adanya tempat buat penyimpanan, kendala dalam memajang, dan lain-lain. Barang yang selesai dipamerkan biasanya dikembalikan ke mahasiswa, atau disimpan ke ruang dosen.
Dilihat dari beberapa permasalahan tersebut maka dibuatlah sistem informasi yang berbasis web ini yang akan membantu menyimpan sekaligus mempromosikan karya sehingga mahasiswa khususnya DKV dapat lebih mudah mengiklankan karya yang sudah dibuatnya. Sistem informasi ini nantinya akan menggunakan teknologi HTML5 dan framework CodeIgniter. Kelebihan pada HTML5 yaitu fitur pemutar video sudah tidak menggunakan plugin pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft Silverlight dan dapat ditulis dalam sintaks HTML dengan tipe media teks, serta CodeIgniter untuk digunakan  menampilkan gambar-gambar dalam bentuk virtual atau sesuatu yang nyata yang diaplikasikan dalam bentuk teknologi. Menggabungkan framework CodeIgniter dan teknologi terbaru maka output yang dihasilkan sistem akan lebih interaktif sehingga baik pengguna maupun masyarakat lebih mudah melihat informasi yang dihasilkannya.
Rumusan masalah yang dapat dirumuskan adalah bagaimana membangun sebuah online virtual gallery untuk menjadi wadah yang dapat menampung karya- karya mahasiswa. Adapun tujuan dari penelitian ini adalah menghasilkan aplikasi online virtual gallery . Manfaat yang diharapkan dengan adanya penelitian ini adalah proses  promosi  Program  Studi  DKV  menjadi  lebih  mudah  dan  efisien  serta jangkauannya lebih luas, sementara itu bagi mahasiswa, mereka dapat dengan mudah memperoleh kerja ataupun client yang berminat akan karya yang mereka hasilkan. Batasan-batasan masalah yang menyederhanakan permasalahan ini yaitu, tidak membahas  tentang  keamanan  data  dalam  sistem,  aplikasi  dibangun  dengan menggunakan framework Codeigniter.

## 2. Kajian Pustaka
Pada penelitian yang berjudul Penerapan Teknologi WebGL pada Aquarium Berbasis  Tiga  Dimensi  (3D)  dibahas  tentang  kelebihan HTML5 yang memperkenalkan fitur baru seperti fitur pemutar video serta fitur drag and drop. Sebelumnya fitur-fitur ini bergantung pada plugin pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft Silverlight. Kelebihan pada HTML5 yaitu dapat ditulis dalam sintaks HTML dengan tipe media teks, HTML dan XML , dapat menggantikan media flash pada media audio dan video, penulisan kode yang lebih efisien, tidak ada plugin browser yang diperlukan [1]. HTML5 dapat membuat pemrograman web akan lebih universal dan menjadi bahasa pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Penelitian ini menjadi acuan dalam
pembuatan virtual galeri DKV dalam pemanfaatan HTML5 dalam segi mendukung file-file multimedia yang digunakan. Elemen HTML5 yang dipakai hampir sama dengan pembuatan akuarium virtual namun ada penambahan satu elemen baru yakni elemen  multimedia  dengan  tag  <video>  dan  <embed>  yang  memungkinkan programmer membuat sendiri video player -nya dalam sebuah website .
Penelitian yang berjudul Pembuatan Museum Wayang Virtual Menggunakan
HTML5 membahas tentang bagaimana supaya website dapat terlihat menarik dan interaktif di mana pengguna nantinya dapat mengunjungi museum wayang virtual yang dapat diakses di mana saja dengan bantuan koneksi internet [2]. Pada penelitian ini membahas bagaimana HTML5 bisa menjadi wadah penyimpanan yaitu gambar wayang dan sekaligus media promosi yang lebih interaktif dan menarik untuk dilihat. Hal yang diambil dan ditiru dari pembuatan museum wayang virtual adalah HTML5 bisa menjadi wadah penyimpanan gambar  dan dikembangkan agar bisa menyimpan video dan link game .
Virtual itu adalah yang tidak nyata atau maya atau komunikasi (proses penyampaian dan penerimaan pesan) menggunakan (melalui) cyberspace / ruang maya yang bersifat interaktif. Komunikasi virtual tidak dapat lepas dari sebuah media internet yang menggunakannya sebagai alat komunikasi. Di sini terlihat adanya peralihan  gaya atau  kebiasaan manusia  dalam berkomunikasi  menyampaikan informasi dengan sesamanya. Dikatakan begitu karena saat ini manusia tidak perlu lagi berkomunikasi pada waktu, tempat yang sama [3].
Online sebagai keadaan konektivitas (ketersambungan) mengacu kepada internet atau world wide web ( www ). Online merupakan bahasa internet yang berarti informasi dapat diakses dimana saja dan kapan saja selama ada jaringan internet. Secara teknis media online adalah media berbasis telekomunikasi dan multimedia (komputer dan internet). Termasuk kategori media online adalah portal, website (situs web ,  termasuk blog ),  radio online ,  TV online ,  dan  email.
Karakteristik dan keunggulan media online dibandingkan media konvensional (cetak/ elektronik) antara lain: dapat diakses kapan saja dan di mana saja, menjangkau seluruh dunia yang memiliki akses internet, berisi info aktual karena kemudahan dan kecepatan penyajian, pembaruan informasi terus dan dapat dilakukan kapan saja [4].
Galeri seni rupa kontemporer merupakan suatu tempat untuk memamerkan hasil karya seni rupa 2 dimensional dan 3 dimensional yang berkembang pada masa kini (kontemporer). Selain sebagai wadah untuk memamerkan karya seni rupa kontemporer, galeri seni rupa kontemporer merawat, menjaga dan mengapresiasikan serta mengembangkan seni kontemporer. Untuk menunjang itu semua, diperlukan fasilitas pendukung wadah eksebisi, tetapi terdapat pula wadah apresiasi, rekreasi serta pengembangan seni kontemporer, selain itu diperlukan pula fasilitas pengelolaan dan pertunjukan yang mendukung aktivitas utama [5].
CodeIgniter merupakan kerangka kerja siap pakai ( framework ) berbasis PHP. CodeIgniter dikembangkan oleh Rick Ellis. Secara default CodeIgniter hanya berjalan  dengan  memproses  beberapa  pustaka  saja,  dengan  demikian  hanya membutuhkan resource yang sedikit sehingga ringan dan cepat dijalankan. Pustaka- pustaka lain yang nantinya akan digunakan bisa di proses sesuai dengan kebutuhan.
Perancangan Online Virtual Gallery (Tambahani, dkk)
Jurnal Teknologi Informasi-Aiti, Vol. 14. No.1, Februari 2016 : 1 - 103
Codeigniter menerapkan lingkungan pengembangan dengan metode MVC (Model- View-Controller) . MVC memisahkan antara logika proses bisnis dengan template atau halaman depan. MVC dapat membuat kode program menjadi terstruktur, terorganisir dan akan mudah dikembangkan kembali oleh selain pengembang awalnya. Model bisa dibilang khusus digunakan untuk melakukan koneksi ke basis data, view merupakan halaman website yang dibuat menggunakan HTML dengan bantuan CSS dan JavaScript , sedangkan controller sebagai penghubung antara model dan view [6] . HTML5 adalah  sebuah  bahasa  markah  untuk  menstrukturkan  dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun
1990 dan versi keempatnya, HTML4 , pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Hingga kini, HTML5 masih dikembangkan dan sepertinya tidak akan pernah berhenti berkembang [7]. HTML5 saat ini sudah mendukung Asynchronous Javascript And XML (Ajax) yang menjadi teknologi wajib diterapkan bagi website-website modern. Ajax membuat aplikasi website menjadi lebih interaktif dan responsive serta memiliki kecepatan dalam memproses request ke server .

## 3. Metode Penelitian dan Perancangan Sistem
Penelitian yang dilakukan dilakukan melalui tahapan penelitian yang terbagi dalam 5 tahapan, yaitu : 1) Analisis kebutuhan dan pengumpulan data, 2) Perancangan sistem meliputi perancangan proses ( UML ), perancangan arsitektur, perancangan database,  perancangan  antarmuka,  3)  Perancangan  aplikasi/program,  4) Implementasi dan pengujian sistem, serta analisis hasil pengujian, 5) Penulisan laporan hasil penelitian.
Tahapan penelitian pada Gambar 1 dapat dijelaskan sebagai berikut : Tahap pertama adalah analisis kebutuhan dan pengumpulan data. Analisis kebutuhan dilakukan melalui observasi dan wawancara kepada tiga dosen Desain Komunikasi Visual Fakultas Teknologi Informasi. Dari hasil observasi dan wawancara : (a) Diperlukan suatu sistem yang dapat menampung karya mahasiswa (b) Sistem ditujukan hanya untuk pameran saja (c) Sistem dapat menampilkan karya mahasiswa yang telah diseleksi, (d) Dapat menampilkan karya berupa gambar, video, dan game, (e) Khusus untuk game dibagi berdasarkan dari sisi produknya serta dapat di down- load , (f) Mahasiswa dapat upload karya-karyanya sendiri, (g) Penyediaan fungsi selection buat seleksi karya yang sesuai kriteria untuk ditampilkan. Tahap kedua : perancangan sistem berdasarkan hasil analisis kebutuhan menggunakan UML (Uni- fied Modelling Language) yang terdiri dari use case diagram, activity diagram, sequence diagram dan class diagram . Tambahan perancangan yang lain yaitu perancangan database meliputi tabel-tabel yang digunakan dalam menyimpan data serta penentuan hubungan relasinya dan perancangan antarmuka aplikasi yang akan dibuat. Tahap ketiga : perancangan aplikasi/program, yaitu merancang aplikasi sesuai dengan kebutuhan sistem berdasarkan perancangan yang sudah dilakukan. Bahasa pemrograman yang dipakai adalah Framework CodeIgniter untuk PHP , Boot- strap framework sebagai kerangka tampilan, jQuery easyUI untuk komponen html tambahan . Tahap keempat : implementasi dan pengujian sistem serta analisis hasil pengujian, yaitu mengimplementasikan aplikasi yang sudah dirancang ke hosting agar dapat diakses secara online , kemudian dilakukan pengujian. Pengujian aplikasi akan dilakukan kepada pihak dosen DKV FTI, mahasiswa DKV, dan mahasiswa FTI sebagai pengunjung. Analisis hasil pengujian dilakukan untuk mengetahui apakah aplikasi telah sesuai dengan yang diharapkan. Tahap kelima : penulisan laporan hasil penelitian. Tahap ini dilakukan dokumentasi proses dari tahap awal sampai tahap akhir dalam bentuk tulisan.
Sistem dirancang dengan menggunakan UML (Unified Modelling Lan- guage) . Sistem yang dirancang dibuat ke dalam empat diagram yaitu use case dia- gram, activity diagram, sequence diagram dan class diagram .
Use case diagram berguna untuk mendeskripsikan tindakan sistem dari sudut pandang pengguna, sebagai deskripsi fungsional dari sebuah sistem dan proses utamanya,  serta  menjelaskan  siapa  saja  yang  terlibat  sebagai  aktor  dalam menggunakan sistem berikut interaksinya [8].
Pada Gambar 2 dibawah ini, merupakan desain use case diagram online virtual galeri DKV. Terdapat 4 pengguna yang memiliki akses berbeda-beda yaitu admin, mahasiswa, dosen dan pengunjung. Pengguna sebagai admin memiliki hak akses untuk mengelola halaman depan, galeri foto, galeri video, galeri game, data mahasiswa, data dosen, mengelola pesan dan data admin. Pengguna sebagai mahasiswa memiliki hak akses untuk mengelola galeri gambarnya sendiri. Pengguna sebagai dosen memiliki hak akses untuk mengelola data gambar, data video, data game, data mahasiswa, dan pesan. Pengguna sebagai pengunjung merupakan semua orang yang mengunjungi sistem ini, pengunjung hanya dapat melihat galeri gambar, galeri video, galeri game, dan mengirim pesan.
Perancangan Online Virtual Gallery (Tambahani, dkk)
Jurnal Teknologi Informasi-Aiti, Vol. 14. No.1, Februari 2016 : 1 - 103
Gambar 2 Use Case Diagram Online Virtual Galeri DKV
Activity diagram berguna untuk memberikan visualisasi alur tindakan dalam sistem, percabangan yang mungkin terjadi, bagaimana alur sistem dari mulai hingga berakhir [8]. Activity diagram merupakan state diagram khusus, di mana sebagian besar state adalah action dan sebagian besar transisi di- trigger oleh selesainya state sebelumnya ( internal processing ). Struktur diagram ini mirip flowchart atau Data Flow Diagram pada perancangan terstruktur. Bermanfaat apabila membuat diagram ini terlebih dahulu dalam memodelkan sebuah proses untuk membantu memahami proses secara keseluruhan.
Gambar 3 Activity Diagram Sistem Upload Foto Mahasiswa
Activity diagram pengguna sebagai mahasiswa dapat dilihat pada Gambar 3. Saat mahasiswa melakukan login , sistem akan mengecek apakah username dan password sudah benar atau salah. Jika benar maka mahasiswa dapat memilih menu yang ditampilkan sistem.  Untuk galeri foto mahasiswa hanya bisa mengelola datanya sendiri. Pada saat insert , data foto masuk ke dalam database tapi belum bisa ditampilkan pada sistem sebelum di setujui oleh dosen apa layak ataupun tidak layak foto tersebut untuk ditampilkan. Untuk lebih jelasnya bisa dilihat pada Gambar 4.
Gambar 4  Sequence Diagram Sistem Upload Foto Mahasiswa
Class diagram menggambarkan struktur objek, deskripsi objek, class pack- age , serta relasinya satu sama lain. Class diagram digambarkan dalam beberapa kelas serta paket yang ada dalam sistem [8]. Class diagram memberikan gambaran system secara statis dan relasinya.
Perancangan Online Virtual Gallery (Tambahani, dkk)
Jurnal Teknologi Informasi-Aiti, Vol. 14. No.1, Februari 2016 : 1 - 103
Pada Gambar 5 yaitu gambaran class diagram untuk database yang digunakan dalam aplikasi. Pada class diagram tersebut digambarkan keterkaitan antar tabel yang ada pada database.
Gambar 6 Desain Interface Aplikasi
Pada Gambar 6 yaitu gambaran awal aplikasi yang akan dibuat, agar nantinya ada gambaran mengenai apa yang akan dibuat nanti pada saat pembuatan aplikasi. Desain interface menggambarkan apa saja yang ditampilkan dalam website . Kiranya ini dapat menjadi patokan dalam proses pembuatan aplikasi online virtual galeri DKV. Pada halaman home ditampilkan gambar, video dan game yang telah melalui proses validasi.

## 4. Hasil dan Pembahasan
Penelitian ini menghasilkan satu aplikasi dalam bentuk website dengan diimplementasikan menggunakan browser . Semua aktor akan mengakses aplikasi melalui website , berikut hasil dan pembahasan aplikasi.
Pada gambar 7 adalah halaman awal jika mengakses aplikasi virtual galeri DKV. Halaman utama akan menampilkan semua gambar yang sudah di masukkan dan form tambah gambar, kedua fitur tersebut ditujukan bagi mahasiswa. Halaman galeri depan terdapat gambar-gambar yang sudah dimasukkan dan telah disetujui oleh dosen. Untuk form tambah gambar jika diisi dengan benar maka sistem akan mengirimkan data beserta file gambar ke dalam database dan path/folder gambar.
Gambar 7 Tampilan Halaman Depan (kiri) dan Form Tambah Gambar Admin (kanan)
Untuk Form validasi hanya terdapat di halaman dosen yang dapat dilihat pada Gambar 8.
Perancangan Online Virtual Gallery (Tambahani, dkk)
Jurnal Teknologi Informasi-Aiti, Vol. 14. No.1, Februari 2016 : 1 - 103

## Kode Program 1 Perintah untuk Mengunggah Gambar
1 function gambarSmall($up_data, $jenis) { 2 $CI =& get_instance();
3 $source             = “./upload/”.$jenis.”/
”.$up_data[‘file_name’] ;
4 $destination_thumb = “./upload/”.$jenis.”/small” ;
5 chmod($source, 0777) ;
6 $CI->load->library(‘image_lib’) ;
7 $img[‘image_library’] = ‘GD2’;
8 $img[‘create_thumb’]  = TRUE;
9 $img[‘maintain_ratio’]= TRUE;
10 $limit_medium   = 300 ;
11 $limit_thumb    = 220; 12 $limit_use  = $up_data[‘image_width’] > $up_data[‘image_height’] ? 13 $up_data[‘image_width’] : $up_data[‘image_height’] ; 14 if ($limit_use > $limit_medium || $limit_use >
$limit_thumb) { 15 $percent_medium = $limit_medium/$limit_use ; 16 $percent_thumb  = $limit_thumb/$limit_use ;}
17 $img[‘width’]  = $limit_use > $limit_thumb ?
$up_data[‘image_width’] * 18 $percent_thumb : $up_data[‘image_width’] ;
19 $img[‘height’] = $limit_use > $limit_thumb ? $up_data[‘image_height’] * 20 $percent_thumb : $up_data[‘image_height’] ; 21 $img[‘thumb_marker’] = ‘’ ; 22 $img[‘quality’]      = ‘100%’ ; 23 $img[‘source_image’] = $source ; 24 $img[‘new_image’]    = $destination_thumb ; 25 $CI->image_lib->initialize($img); 26 $CI->image_lib->resize(); 27 $CI->image_lib->clear() ; 28 }
Kode Program 1 merupakan potongan perintah untuk mengunggah gambar dengan menggunakan library image_lib Codeigniter, file gambar  dibuat menggunakan library resize yang berfungsi mengubah ukuran gambar asli, membuat copy (dengan atau tanpa mengubah ukuran), dan membuat gambar thumbnail. Resizing image diperlukan untuk mengoptimalisasi waktu loading page . Penggunaan maksimal  gambar  2MB  ( MegaByte )  adalah  jika  menggunakan  gambar  yang berdimensi besar pada bagian tertentu yang mengharuskan banyak gambar artikel yang tampil, tentu saja akan membuat halaman tersebut lebih lama waktu load -nya. Aplikasi ini menggunakan Library Path sebagai wadah penampungan gambar, apabila berhasil terkirim data gambar akan disimpan ke dalam database sistem. Menampilkan video dalam halaman web sekarang ini sudah menjadi trend tersendiri, namun belum ada standar untuk menampilkan video dalam halaman web . Sekarang ini kebanyakan website menggunakan plugin (seperti flash) untuk memuat file video di halaman website mereka, terkadang yang menjadi masalah adalah tidak semua browser memiliki plugin yang sama. Saat ini, terdapat tiga format video
yang didukung untuk elemen video yaitu Ogg, MPEG 4, WebM [9]. Yang bisa dilihat pada Tabel 1.
Tabel 1 Format Video [9]
Kode Program 2 Perintah untuk Menampilkan Video
Embed : 1 <iframe width=”760" height=”515" src=”https:// www.youtube.com/embed/d5ttbWSx2LU” 2. frameborder=”0" allowfullscreen>Browser Tidak Mendukung</iframe> Video Player : 1 <video src=”video/dkv_diskomvision.mp4" width=”760" height=”515" 2. frameborder=”0" allowfullscreen>Browser Tidak Mendukung Tag Video</iframe>
Kode Program 2 merupakan potongan perintah untuk menampilkan video yang di embed dari youtube dan membuat video player sendiri. Pada HTML5 ini dapat menampilkan video dalam halaman website . HTML5 telah menetapkan cara standar  untuk memasukkan file video  ke dalam  halaman web ,  yakni  dengan menggunakan elemen video.  Apabila dijalankan di browser , maka akan tampil player video seperti pada Gambar 9.
Perancangan Online Virtual Gallery (Tambahani, dkk)
Jurnal Teknologi Informasi-Aiti, Vol. 14. No.1, Februari 2016 : 1 - 103
Gambar 10 Tampilan Halaman Game
Gambar 10 merupakan gambaran dari penyampaian informasi game . Ketika salah satu gambar game diklik, maka akan muncul windows baru yang berisikan informasi wayang tersebut. Dan untuk download file game akan langsung diarahkan ke link tempat penyimpanan file -nya.
Kelebihan HTML5 dalam menangani file multimedia yaitu video dan elemen audio untuk media pemutaran, dukungan yang lebih baik untuk penyimpanan
secara offline . Elemen konten yang lebih spesifik, seperti artikel, footer , header , nav, section . HTML5 sudah mendukung SVG ( Scalable Vector Graphics ) yaitu sebuah format file baru untuk menampilkan grafik dalam pengembangan. Kelebihan SVG gambar tidak akan kehilangan kualitasnya apabila diperbesar atau diperkecil ( scalable ), karena dibuat berdasarkan metode vektor ( vector ), bukan pixel (seperti format grafik pada umumnya, GIF, JPEG dan PNG ). Sehingga memungkinkan pengembang web dan juga designer untuk membuat grafik dengan kualitas mutu tinggi.
Pengujian aplikasi dilakukan dilakukan dengan dua cara, yaitu alfa dan beta . Pengujian alpha adalah pengujian yang dilakukan oleh programmer terhadap aplikasi yang dibuat sebelum aplikasi tersebut diujikan kepada user . Pengujian aplikasi pada tahap ini menggunakan metode Black Box , yaitu pengujian fungsional tanpa melihat alur eksekusi program, namun cukup dengan memperhatikan apakah setiap fungsi sudah berjalan dengan baik sesuai dengan yang diharapkan [8]. Hasil pengujian blackbox untuk aplikasi online virtual galeri dapat dilihat pada Tabel 2.
Berdasarkan pengujian yang telah dilakukan pada aplikasi online virtual galeri DKV dapat dilihat pada Tabel 2, setiap fungsi yang diuji valid, maka dapat disimpulkan bahwa setiap fitur aplikasi berjalan dengan baik dan sesuai yang diharapkan. Pengujian juga dilakukan dengan pengisian form yang salah maka aplikasi tidak akan mengolah/ menyimpan data.

## Tabel 2 Hasil Pengujian Black Box
Berdasarkan pengujian yang telah dilakukan pada aplikasi online virtual galeri DKV dapat dilihat pada Tabel 2, setiap fungsi yang diuji valid, maka dapat disimpulkan bahwa setiap fitur aplikasi berjalan dengan baik dan sesuai yang diharapkan. Pengujian juga dilakukan dengan pengisian form yang salah maka aplikasi tidak akan mengolah/ menyimpan data.
Pengujian beta yaitu pengujian aplikasi yang dilakukan oleh user dalam hal ini mahasiswa, dosen DKV. Pengujian untuk user mahasiswa dilakukan dengan cara memberikan pertanyaan pada 15 mahasiswa DKV FTI UKSW, pengujian dosen dilakukan dengan cara memberikan pertanyaan kepada T. Arie Setiawan Prasida, ST., M.Cs., Birmanti Setia Utami, M.Sn. dan  Michael Bezaleel, S.Kom., M.Cs. selaku dosen progdi DKV. Pertanyaan diisi setelah user melakukan uji coba aplikasi secara langsung. Berdasarkan pengujian yang telah dilakukan dan pertanyaan yang telah dibagikan kepada setiap user maka diperoleh hasil bahwa aplikasi online virtual  gallery yang  dibuat  menggunakan HTML5 berhasil  menjadi  media penyimpanan dan penyebaran informasi yang interaktif dan menarik, serta bermanfaat untuk digunakan pada Program Studi Desain Komunikasi Visual. Hasil pengujian beta dapat dilihat pada Tabel 3.
Perancangan Online Virtual Gallery (Tambahani, dkk)
Jurnal Teknologi Informasi-Aiti, Vol. 14. No.1, Februari 2016 : 1 - 103
Tabel 3 Hasil Pengujian Beta Testing
Pengujian browser dilakukan untuk mengetahui browser-browser yang mendukung pemuatan halaman web yang dibuat menggunakan HTML5. HTML5 hanya mendukung modern browser . Tabel 4 merupakan tabel hasil pengujian browser.
Tabel 4 Hasil Pengujian Browser

## 5. Simpulan
Berdasarkan penelitian yang sudah dilakukan dapat disimpulkan bahwa elemen-elemen pada HTML5 dan metode MVC cocok diterapkan dalam pembuatan virtual galeri karena HTML5 sudah tidak lagi menggunakan plugins pihak ketiga seperti adobe flash untuk file-file multimedia, jadi pengaksesan website menjadi cepat dan lebih interaktif. Jika menggunakan file yang berdimensi besar pada bagian tertentu yang mengharuskan banyak gambar artikel yang tampil, tentu saja akan membuat halaman tersebut lebih lama waktu load -nya.  Penelitian ini menghasilkan sebuah wadah virtual yang mampu menampung karya-karya mahasiswa DKV sehingga dengan adanya aplikasi ini mahasiswa sudah tidak lagi khawatir file pameran akan hilang ataupun rusak.

## 6. Pustaka
[1] Wibowo,  Herry,  2011, Penerapan  Teknologi  WebGL  pada  Virtual Aquarium Berbasis Tiga Dimensi (3D) . Salatiga : Universitas Kristen Satya Wacana.
[2] Adriana,  Fransisca,  2013, Pembuatan  Museum  Wayang  Virtual Menggunakan HTML5 . Salatiga : Universitas Kristen Satya Wacana.
[3] Ni’am,  Moch  Nailun,  2014, Proses  Terbentuknya  Komunitas  Virtual Menjadi  Sosial  Melalui  Media  Baru:  Studi  Etinografi  Terbentuknya Komunitas  Pecinta  Fotografi  Molonesia  Menuju  Komunitas  Sosial Melalui Aplikasi Molome. Surabaya : UIN Sunan Ampel.
[4] M. Romli, Asep Syamsul, 2012, Jurnalistik Online: Panduan Mengelola Media Online . Bandung : Nuansa.
[5] Swastika, Popi Sari, 2012, Perancangan Dan Perencanaan Galeri Seni Rupa  Kontemporer  di  Yogyakarta. http://e-journal.uajy.ac.id/713/3/ 2TA12980.pdf. Diakses : 08 April 2015.
[6] Julisman, Agung,  2014, Sistem  Aplikasi  Travel  dengan  AngularJS  & Codeigniter . Yogyakarta : Loko Media.
[7] Agung, Gregorius, 2012, Buku Pintar HMTL5+CSS3+Dreamweaver CS6 .
Perancangan Online Virtual Gallery (Tambahani, dkk)
Yogyakarta : Jubilee Enterprise.
[8] Wahyu dkk. 2014. Aplikasi Desain Denah Perumahan dengan Teknologi Augmented Reality pada Mobile Phone berbasis Androis OS .
[9] Khafidli, M.Firgiawan, 2011, Trik Menguasai HTML5 CSS3 PHP Aplikatif . Yogyakarta : Loko Media.
[10] Rifiana. 2009. Teknik Pengujian Perangkat Lunak. http://www.google.co.id/ url?sa=t&rct=j&q=&esrc=s&source=web&cd=6&sqi=2&ved=0CEYQFj AF&url=http%3A%2F%2Fri fi ana.staff. gunadarma.ac.i d%2FDownl oads%2Ffi les%2F26083%2FTekni k%2BPenguji an%2Bperangkat%2BLunak%2B- %2BBlack%2BBox.pdf&ei=wzecU5OmH8rJuASam4HADA&usg=AFQjCNEt49s5gvalxb- nKRWjgztM9EFlyQ&bvm=bv.68911936,d.c2E&cad=rja. (Diakses tanggal 9 Juni 2014)