## pISSN: 2442-3386  eISSN: 2442-4293

## Vol 8 No 2 Jul – Des  2022, 117 - 128

## VIRTUAL EXPO PENGENALAN PRODUK DALAM NEGERI BERBASIS WEB
M. Iqbal Wardana 1 , Anang Kukuh Adisusilo 2
Program Studi Informatika Fakultas Teknik Universitas Wijaya Kusuma Surabaya 1,2
iqbalabs007@gmail.com 1 , anang65@uwks.ac.id 2

## Abstrak
Virtual  Expo merupakan  sebuah platform pameran  virtual  yang  berbasis online dan  sebagai  pengganti  pameran  fisik dikarenakan era pandemic sekarang ini merupakan era yang sangat sulit khususnya di bidang pengenalan produk dalam negeri yang dihasilkan oleh UMKM, di karenakan keterbatasan UMKM untuk bisa melakukan pameran secara fisik seperti di  dalam  gedung-gedung.  Untuk  mengatasi  masalah  tersebut  dilakukan  penelitian  dengan  menggunakan  sistem Virtual Expo berbasis web. Di dalam  penelitian menggunakan grafis 2D dan 3D sebagai fitur untuk memperkenalkan produk- produk UMKM, dengan user sebagai admin virtual expo dan pemilik produk. Pemilik produk diharapkan bisa melakukan penempatan  produknya  pada  sistem  dan  admin  bisa  menambahkan display tempat  produk.  Metode  penelitian  yang digunakan untuk menyelesaikan penelitian ini dimulai dari pembuatan analisa kebutuhan fungsional dan non fungsional, perancangan  sistem,  desain  web,  desain environment pameran virtual ,  objek  3D, assets  material ,  implementasi  dan pengujian. Hasil yang dicapai dalam penelitian ini adalah sebuah pameran virtual yang dapat membantu memperkenalkan produk-produk UMKM yang dibuat agar masyarakat lebih mudah dan tertarik dalam menggunakan sistem dari sisi user , konsumen.
Kata Kunci: Virtual Expo , Produk Dalam Negeri, UMKM, Web.

## Abstract
Virtual Expo is an online-based virtual exhibition platform and as a substitute for physical exhibition, because the current pandemic era is a very difficult era, especially in the field of introducing domestic products produced by UMKM, due to the limitations of UMKM to be able to physically exhibit such as inside buildings. To overcome this problem, this research was carried out using a web-based virtual expo system. In this research 2D and 3D graphics are used  as a feature to introduce  UMKM products,  with  the  user as  a admin and  the  owner products of  the virtual expo.  Products  owner are expected to be able to place their products on the system and admin can add products display. The research method used to  complete  this  research  starts  from  making  functional  and  non-functional  requirement  analysis,  system  design,  web design,  virtual  exhibition,  environment  design,  3D  objects,  material,  assets,  implementation  and  testing.  The  results achieved in this research is a virtual exhibition that can help introduce UMKM products that are made, so that people are easier and more interested using the system on the user and the costumer side.
Keywords: Virtual Expo, Local products, UMKM, Web.

## I. PENDAHULUAN
Pada era pandemic covid-19 seperti sekarang ini terdapat salah satu permasalahan pada bidang pengenalan produk. Bagi para penjual khususnya UMKM (Usaha Mikro Kecil dan  Menengah)  kesulitan  melakukan  kegiatan  pameran produk khususnya produk dalam negeri[1].
Pameran sendiri merupakan sarana untuk memperkenalkan  dan  meningkatkan  penjualan  dan kualitas produk, dimana penjual ataupun pengusaha dapat bertemu  langsung  dengan  konsumen  atau  pelanggan dengan jadwal dan tempat yang sudah ditentukan. Namun akibat dari pandemic saat ini 90 persen kegiatan pameran skala  kecil  maupun  besar  terpaksa  ditunda  bahkan dibatalkan[2].
Contoh dari segi kuliner ada “baso aci rara”, dan makanan snack ringan “awenak” yang berlokasi di Surabaya,. Dan contoh dari segi fashion ada “Dastera” UMKM ini menjual produk daster yang berlokasi di Surabaya. Contoh-contoh
diatas  juga  mengalami  kesulitan  memperkenalkan produknya di masa pandemic .
Dalam rangka memberikan dukungan atau bantuan untuk para pengusaha UMKM tepatnya di daerah Jawa Tengah, Dinas  Koperasi  dan  UMKM  (Dinkop-UMKM)  Provinsi Jawa  Tengah  menggelar  UKM Virtual  Expo .  Pameran profil produk UMKM akan dilakkukan dengan virtual atau maya ini berlangsung selama 3 hari yakni pada tanggal 25 – 27 Oktober 2020[1].
Ema  Rachmawati,  Kepala  Dinkop-UMKM  Jawa  tengah, menjelaskan  bahwasanya  program  ini  merupakan  suatu usaha  yang  digunakan  untuk  memberi  dukungan  kepada pengusaha  UMKM  di  Jawa  Tengah  dalam  memasarkan produknya.  Terlebih  lagi  guna  menjaga  pelaku  UMKM dalam  melaksanakan  kegiatan  usahanya  di  masa  baru ( New Normal) [1].
Pameran  produk  virtual  ini  juga  sebagai  media  promosi bagi para UMKM itu sendiri, promosi sendiri merupakan

## Melek IT

## Information Technology Journal. Vol 8 No 2 Jul - Des 2022, 118 - 128
suatu  bentuk  penyebaran  informasi  antara  penjual  atau pembeli  [3].  Tentu  saja  menggunakan  media  promosi dalam  bentuk virtual ini  membuat  suatu  inovatif  dan interaktif  bagi  para  calon  pembeli  yang  ingin  melihat bentuk dari produk yang dikenalkan oleh UMKM [4]. Dan juga  membuka  peluang  yang  lebih  luas  bagi  pengunjung dari  berbagai  daerah,  termasuk  mancanegara  untuk mengakses pameran virtual tersebut.

## II. TINJAUAN PUSTAKA
2.1 Virtual Expo
Virtual Expo (VE) atau pameran virtual merupakan sarana pengganti  dari  pameran  fisik  yang  dikarenakan  bisa mengatasi  keterbatasan  dalam  ruang,  waktu  dan  juga lokasi/tempat. Virtual  Expo bisa  memungkinkan  para pengunjung  dari  mancanegara  tertarik  dengan  produk dalam negeri yang terdaftar dalam pameran selama 24 jam.
VE  yang  dirancang  dengan  baik  dapat  memberikan pengalaman  menarik  mencakup  pembelajaran,konten- konten  luar  yang  ada  di  pameran  fisik,  parisipan  atau kontribusi  dalam  forum  online  ,belanja  online  dan  lain sebagainya[5][6].

## 2.2 Produk Dalam Negeri
Produk  merupakan  sesuatu  yang  dapat  ditawarkan  ke dalam pasar dalam rangka memenuhi kebutuhan ataupun keinginan. Produk yang dipasarkan meliputi produk fisik, layanan, experience , acara, tempat, organisasi, seseorang, dan ide[7].
Produk  ialah  bentuk  dari  barang  yang  dapat  ditawarkan oleh  produsen  guna  diperhatikan,  diminta,  dicari,  dibeli, digunakan,  atau  dikonsumsi  oleh  pasar  dalam  rangka memenuhi kebutuhan atau tuntutan pasar yang terkait[8].

## 2.3 UMKM (Usaha Mikro Kecil dan Menengah)
Usaha Mikro Kecil dan Menengah (UMKM) merupakan unit  badan  usaha  produktif,  yang  dilakukan  perorangan atau badan usaha di semua sektor ekonomi[8].
Dasar  perspektif  perkembangannya,  UMKM  dapat diklasifiksikan menjadi 4 kelompok yaitu:
1. Livelihood  Activities ,  merupakan  UMKM  yang digunakan  sebagai  peluang  kerja  untuk  membuat penghidupan atau nafkah, yang lebih umum dikenal.
2. Micro  Enterprise ,  merupakan  UMKM  yang  memiliki sifat pengrajin tetapi belum memiliki sifat kewirausahaan.
3. Smal  Dynamic  Enterprise ,  merupakan  UMKM  yang sudah  memiliki  jiwa  wirausaha  dan  dapat  menerima operasi subkontrak dan ekspor.
4. Fast  Moving  Enterprise ,  merupakan  UMKM  yang sudah  memiliki  jiwa  wirausaha  dan  bertransformasi menjadi usaha dengan skala yang lebih besar[9].

## 2.4 Flowchart
Flowchart adalah representasi grafis dari langkah-langkah dan  alur  program.  Flowchart  membantu  analis  dan
programmer  dalam  melakukan problem  solving suatu masalah  menjadi  segmen  yang  lebih  kecil  dan menganalisis  alternatif  operasional.[10].  Simbol-simbol Flowchart ditunjukkan pada gambar 1.

## Gambar 1 Simbol Flowchart

## 2.5 PHP (Hypertext Preprcessor)
PHP merupakan bahasa pemrograman yang berbasis open source dan  sangat  cocok  untuk  pengembangan  dalam sebuah  web  dan  dapat  disematkan  dalam  risalah  HTML. Bahasa  PHP  mudah  dipelajari,  karena  memungkinkan untuk  menulis  beberapa  bahasa  pemrograman  seperti  C, Java, dan Perl.
Sistem  kerja  PHP  dimulai  dengan  permintaan  dari halaman  web  melalui  browser.  Browser  mencari  alamat dari server web berdasarkan URL di jaringan internet atau alamat  situs  web,  mengidentifikasi  halaman  yang diinginkan,  dan  mengirimkan  semua  informasi  yang dibutuhkan server web. Server web kemudian menemukan file  yang  diminta  dan  menampilkan  kontennya  di browser[10].

## 2.6 MySQL
MySQL adalah database yang berisi satu atau lebih tabel. Sebuah tabel terdiri dari beberapa baris, setiap baris berisi satu atau lebih tabel.[11].
MySQL adalah database server open source yang sangat populer.  Software  database  yang  dimiliki  berbagai keunggulan ini banyak digunakan oleh para praktisi untuk membuat  banyak  proyek.  Adanya  fitur  API  ( Application Programming Interface ) MySQL memungkinkan berbagai  aplikasi  komputer  yang  ditulis  dalam  bahasa pemrograman  yang  berbeda  untuk  mengakses  database MySQL.
Tipe data MySQL adalah data yang terdapat dalam sebuah tabel  berupa  field  –  field  yang  berisi  nilai  dari  data tersebut.Nilai  data  dalam  field  memiliki  tipe  sendiri  – sendiri[11].

## 2.7 Unity 3D
Ada  banyak  sekali  penggemar  yang  menginginkan  hasil kreatif  dari  perspektif  pengembangan  media  berbasis perangkat lunak yang berbayar maupun gratis. CEO Unity mengumumkan pada tahun 2014 bahwa misi Unity adalah

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 8 No 2 Jul – Des  2022, 119 - 128
untuk  “mendemokratisasikan  dalam  pengembangan sebuah  game”  Artinya  Unity  berupaya  membuat  alat pengembangan  yang  mudah  dalam  penggunakan, memiliki  kualitas  game  3D  yang  sangat  baik,  dan  dapat berjalan di berbagai platform .[12].
Co-founder dan CEO Unity tahun 2013, mengungkapkan bahwa  Unity  merupakan  seperangkat  alat  yang  dapat digunakan  untuk  membangun  game  atau  aplikasi  seluler menggunakan berbagai teknologi yang meliputi teknologi grafis, audio, physics , interactions , dan networking [12].

## 2.8 Conceptual Data Model (CDM)
Conceptual  Data  Model (CDM)  atau  model  data  adalah konsep yang terkait dengan pandangan pengguna terhadap data yang disimpan dalam database.
Jenis-jenis Objek Dalam CDM :
a. Entity Untuk membuat entitas, klik item berlabel Entitas di palet, lali klik spasi di sebelah kanan. Untuk membuat beberapa  entitas,  klik  dan  tahan  entitas  sebanyak  yang dibutuhkan.
b. Relationship Untuk membuat relasi antara dua entitas, klik item pada palet berlabel Relasi, lalu hubungkan kedua entitas.Klik  dua  kali  relasi  dan  masukkan  nama  di field nama  pada  tab  umum  untuk  memberi  nama  pada  relasi yang dibuat.
c. Inheritance Untuk  membuat inheritance dari  entitas, pertama-tama buat entitas lain yang merupakan anak dari entitas induk. Kemudian klik item dengan label pewarisan pada  palet  untuk  menautkan  entitas  induk  ke  salah  satu entitas  anak.  Untuk  menghubungkan  entitas  turunan lainnya, buat garis antara ikon inheritance (dalam bentuk setengah  lingkaran)  dan  entitas  turunan.  Lalu  beri  nama inheritance [13].

## 2.9 Physical Data Model (PDM)
Model relasional atau Physical Data Model (PDM) adalah kerangka  yang  menghasilkan  sekumpulan  tabel  guna untuk  menggambarkan  bentuk  hubungan  diantara  data. Setiap  tabel  memiliki  sekumpulan  kolom,  dan  setiap kolom memiliki nama dan tipe data yang unik. PDM ialah suatu  bentuk  konsep  yang  terperinci  dalam  penggunaan data  yang  disimpan  dalam  basis  data.  Nama  tabel  juga merupakan  nama  asli  dari  tabel  yang  diimplementasikan dalam DBMS, karena PDM merupakan bentuk fisik dari desain database yang siap untuk diimplementasikan dalam DBMS.

## 2.10 XAMPP
XAMPP ialah perangkat lunak gratis yang support banyak operating sytem dan merupakan  beberapa kumpulan dari program.  Fungsinya  yakni server yang independen (localhost) yang terdiri dari program bentuk server Apache HTTP,  database  MySQL  dan  penerjemah  bahasa  yang dirilis menggunakan bahasa pemrograman PHP dan Perl. [14].
Nama XAMPP adalah singkatan dari X (4 sistem operasi dari  semua  jenis),  Apache,  MySQL,  PHP  dan  Perl. Program ini dilisensikan GNU General Public License dan tidak  dikenai  biaya. Server web  yang  mudah  digunakan yang dapat memberikan tampilan halaman web dinamis.

## 2.11 Finite State Machine (FSM)
Finite State Machine adalah kontrol gerak agen permainan yang tergantung  pada kondisi yang diterapkan. Menerapkan  algoritma  FSM  juga  berguna  dalam menentukan  dan  merancang  berbagai  jenis  respon terhadap agen game[15].
Gambar 2 Diagram State Sederhana FSM
Pada gambar 2 merupakan diagram state sederhana FSM, diagram tersebut menunjukkan FSM dalam dua buah state dan dua buah input sekaligus empat buah aksi output yang berbeda : yang terlihat pada gambar 2, ketika sistem baru dijalankan, sistem mulai bertransisi ke state0, di keadaan ini  sistem    menghasilkan  Action1  jika  terjadi  masukan Event0, sedangkan jika terjadi Event1 maka Action2 akan dieksekusi  kemudian  sistem  selanjutnya  bertransisi  ke keadaan State1 dan seterusnya[16].

## III. METODOLOGI PENELITIAN

## 3.1 Tahapan Penelitian
Penelitian  yang  akan  dilakukan  oleh  peneliti  meliputi seperti pada gambar 3.
Analisa Kebutuhan Fungsional dan Non-
Fungsional
Fungsional : Analisa layanan apa saja yang disediakan sistem Non-Fungsional : Analisa batasan layanan atau fungsi yang
ditawarkan oleh sistem Perancangan Sistem Meliputi desain algoritma,desain web dan database, pembuatan 3D objek, pembuatan a ssets ,m aterial ,dan s ound Implementasi
Membuat sistem pada setiap proses menggunakan PHP, MYSQL dan Unity 3D

## Pengujian Sistem
Melakukan uji coba atau evaluasi pada sistem kepada user/pengguna
Gambar 3. Diagram Alur Penelitian
1. Analisa Kebutuhan Fungsional dan Non- Fungsional

## Melek IT

## Information Technology Journal. Vol 8 No 2 Jul - Des 2022, 120 - 128
Proses  analisa  kebutuhan  fungsional  dan  non- fungsional  merupakan  proses  dimana  penulis melakukan analisis terhadap permasalahan yang didapat dalam penelitian.
2. Perancangan Sistem Perancangan sistem
merupakan
tahap perancangan  untuk  kebutuhan  kedalam  sebuah representasi sistem, sebelum memulai pengimplementasian pada kode program.
3. Implementasi Implementasi  merupakan  pengimplementasian dari perancangan sistem yang sudah dibuat.
4. Metode Pengujian Metode  pengujian  merupakan  proses  pengujian sistem yang akan dilakukan pada user dan guna untuk mengetahui apakah sistem yang dirancang sudah sesuai.

## 3.2 Perancangan Sistem
Dalam  perancangan  sistem  menggunakan  skema visual table of content. Visual table of content adalah skema yang terdiri  dari  diagram  hirarki  yang  disusun  analisis  dalam pembuatan sistem yang ditunjukkan pada gambar 4.
0.0 Halaman Web Utama 1.0 Web User 3.0 Web Virtual Expo 1.1 Daftar 1.2 Login 1.2.1 Tambah Produk 1.2.2 Ubah Produk 1.2.3 Hapus Produk 3.1 Eksplorasi ruang pameran 3.2 Melihat produk 1.3 Lihat Produk Pameran 2.0 Web Admin 2.1 Lihat User 2.1 Hapus User
Gambar 4. Skema Visual Table of Content

## 3.3 Desain Sistem
Desain Sistem yang dibangun berfokus untuk memudahkan  para  user  melakukan  proses  pendaftaran pada  produknya.  Desain  sistem  sendiri  terdiri  dari beberapa jenis sebagai berikut :
• Desain Database
• Desain Web
• Desain Environment Ruang Pameran
• Kontrol Karakter, dan Interaksi
Dari semua jenis desain dilakukan secara terstruktur agar desain lebih terealisasi sesuai rancangan awal.

## 3.3.1 Desain Database
Desain  database  menggunakan  CDM  ( Conceptual  Data Model ) dan PDM ( Physical Data Model ), disajikan pada Gambar 5 dan 6.
Gambar 5. Database CDM
Di  dalam  database  terdapat  dua  tabel  yang  berelasi,yaitu table  “users”  dan  tabel  “produk”.  Keduanya  direlasikan one  to many  karena  setiap users akan  memiliki  produk lebih dari satu. Dan ada tabel admin sebagai pengoperasian admin dalam database.

## Gambar 6 Database PDM
Generate ke PDM dalam table produk mempunyai foreign key “id_user” karena sebelumnya pada CDM dengan dua tabel sudah direlasikan.
Nama database yang akan digunakan adalah “virtual_expo” dan memiliki 3 tabel yaitu tabel users,tabel admin dan  tabel  produk,  entitas  dari  tabel  user  dan  tabel produk

## 3.3.2 Desain Web
Desain web terbagi menjadi berbagai halaman web yang mempunyai proses dan fungsi yang berbeda-beda yaitu:
1. Halaman Awal
Merupakan  halaman  index  utama  dalam  website  yang dimana akses awal user untuk mengakses pameran virtual atau  melihat  produk-produk  dari  setiap user yang  sudah mendaftarkan produknya.
2. Halaman Pendaftaram
Merupakan  halaman  pendaftaran  akun user guna mendaftar dalam sistem.
Mulai
Daftar Input Nama,Nama UMKM,Username,Password, Email Pendaftaran Akun Berhasil Selesai
Gambar 7. Flowchart Pendaftaran Akun
Pada  gambar  7  merupakan  tahap  alur  dari  pendaftaran akun.  Pertama user mengunjungi  halaman  pendaftaran lalu  daftar  dengan  menginputkan  nama,  nama  umkm, username,  password  dan  email,  jika  sudah  tekan  tombol daftar maka otomatis akun sudah terdaftar ke database. 3. Halaman Login
Merupakan halaman login atau user masuk dalam sistem. Pada  gambar  8  merupakan  tahap  alur  dari  proses  login user.  Pertama  user  mengunjungi  halaman  login  lalu menginputkan  email  dan  password,  jika  email  atau password salah maka mengulang kembali inputan dan jika tidak maka berhasil login.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 8 No 2 Jul – Des  2022, 121 - 128
Mulai Login Input Email dan Password Login Berhasil Selesai Email atau password salah tidak ya Gambar 8 Flowchart Login
4. Halaman Dashboard Admin
Merupakan halaman dashboard admin saat admin berhasil login dalam sistem
5. Halaman Dashboard User
Merupakan  halaman  dashboard user saat user berhasil login dalam sistem.
6. Halaman Tambah Produk
Merupakan  halaman  tambah  produk  untuk  memasukkan atau input produk oleh user .
Mulai Login Input Email dan Password Penambahan Produk Berhasil Selesai Tambah Produk Input jenis produk,nama produk,deskripsi,gambar produk Tambah produk lagi tidak ya
Gambar 9. Flowchart Tambah Produk
Pada  gambar  9  merupakan  tahap  alur  tambah  produk. Pertama  user  melalui  sesi  login  terlebih  dulu  lalu  pilih proses  tambah  produk,ketika  tambah  produk  user  harus menginputkan sesuai jenis produk,nama produk, deskripsi, dan gambar. Jika user ingin menambah produk lagi tinggal menginputkan kembali yang sesuai pada pada inputan,jika tidak maka selesai menambah produk yang pertama.
7. Halaman Info Produk
Merupakan  halaman  info  produk  untuk  menampilkan produk apa saja yang sudah didaftarkan oleh setiap user.
Dan  terdapat  2  proses  ubah  dan  hapus  produk  yang dijelaskan berikut ini:
a). Proses Ubah Produk
Merupakan  halaman  ubah  produk  untuk  mengubah keterangan atau gambar dari produk yang ingin diubah.
Mulai Login Selesai Info Produk Ubah,nama produk,deskrip si,gambar produk Ubah tidak ya Ubah produk berhasil
Gambar 10 Flowchart Ubah Produk
Pada  gambar  10  terdapat  alur  untuk  ubah  produk. User setelah  melalui  sesi  login  dan  sudah  menambahkan produk, jika ada salah penulisan atau gambar pada produk bisa  mengubah  melalui  tombol  ubah  dan  menginput kembali penulisan yang salah pada nama produk,deskripsi atau gambar. Jika tidak mengubah maka selesai.
b). Proses Hapus Produk
Selesai Hapus Produk Hapus produk berhasil Mulai Login Info Produk ya tidak Gambar 11 Flowchart Hapus Produk
Pada  gambar  11  terdapat  alur  untuk  hapus  produk. User setelah  melalui  sesi  login  dan  sudah  menambahkan produk, Jika user ingin menghapus produknya maka user harus  melakukan  klik  tombol  hapus  pada  produk  yang ingin dihapus, jika tidak maka selesai.

## 3.3.3 Desain Environment Ruang Pameran
Dalam  gambar  12  denah  pameran  terdapat  kerangka MAIN  HALL  dan  STAND  HALL,penjelasan  sebagai berikut:

## Melek IT

## Information Technology Journal. Vol 8 No 2 Jul - Des 2022, 122 - 128
a. Main  Hall  :  Aula  pertama  yang  akan  dimasuki  oleh
player atau user dan  juga  sebagai  penghubung  antar STAND HALL.
b. STAND HALL : Merupakan aula tempat dimana stand produk user itu tersimpan di dalam sebuah  Stand yang berbentuk objek 3D.
STAND HALL A STAND HALL B MAIN HALL STAND HALL C Gambar 12 Ruang Lingkup Pameran MAIN HALL Player Resepsionis NPC Assets Assets Assets Assets Assets Gambar 13 Main Hall
Dalam  Main  Hall  juga  terdapat environment atau assets dan  NPC  yang  sudah  dipersiapkan  agar  lebih  menarik, assets nya  berupa  poster/pamflet  dari  produk-produk UMKM  dan  Resepsionis  NPC  sebagai  interaksi  dengan player/user .
STAND HALL Obek 3D STAND Obek 3D STAND Obek 3D STAND Obek 3D STAND Obek 3D STAND Obek 3D STAND Obek 3D STAND Obek 3D STAND Assets Assets Gambar 14 Stand Hall
Dalam stand hall terdapat objek 3D stand sebagai tempat produk user yang akan dipamerkan, dan juga assets yang akan mengisi stand hall agar lebih menarik.

## 3.3.4 Desain Kontrol Karakter
Pada  tahap  ini  merupakan  algoritma  dari  pergerakan karakter,NPC,dan proses interaksi, dan ada beberapa jenis proses yang akan dijelaskan sebagai berikut : 1. Karakter Movement
Gambar 15. FSM Movement Keyboard
Pada  gambar  15  merupakan finite  state  machine pergerakan  keyboard  dari  karakter user yang  dijalankan, pergerakan keyboard dijelaskan sebagai berikut.
(1)W,A,S,D  :  pergerakan  karakter  berjalan  ke  arah atas,bawah,kiri dan kanan.
(2) E : Melakukan interaksi pada objek yang sudah di atur bisa berinteraksi.
(3) L.Shift : Melakukan pergerakan berlari. (4) Space : Melakukan pergerakan lompat.
Gambar 16 FSM Movement Mouse
Pada  gambar  16  merupakan finite  state  machine pergerakan  mouse  dari  karakter user yang  dijalankan, pergerakan mouse dijelaskan sebagai berikut.
(1) Vertical : Kamera mengarah ke atas dan ke bawah.
(2) Horiontal : Kamera mengarah ke kiri dan ke kanan, jika arah vertical dan horizontal digabung akan memutar arah karakter searah sumbu X,Y. kamera mengikuti pergerakan arah karakter sebagaimana sumbu X,Y diarahkan.

## 3.3.5 Desain Pemodelan 3D Assets
1. Pemodelan Karakter
Pada  tahap  ini  desain  pemodelan  3D  dihasilkan  sebuah desain  model  karakter,  pemodelan  menghasilkan  desain seperti pada gambar 17
Gambar 17 Pemodelan 3D Karakter
Pemodelan  3D  karakter  menggunakan  Blender  dengan menggunakan  teknik, Meshing,  Rigging,  Texturing dan animating. Dimana dari semua teknik, ide dan tema dari

## pISSN: 2442-3386  eISSN: 2442-4293

## Vol 8 No 2 Jul – Des  2022, 123 - 128
sistem ini disatu padukan menjadi atau membentuk suatu karakter user yang akan digunakan dalam sistem. 2. Pemodelan Karakter NPC
Pada  tahap  ini  desain  pemodelan  3D  dihasilkan  sebuah desain  model  karakter  NPC,  pemodelan  menghasilkan desain seperti pada gambar 18
Gambar 18 Pemodelan 3D Karakter NPC Pada  gambar  18  merupakan  pemodelan  karakter  NPC, karakter  NPC  bersumber  dari  unity assets  store yang dimana bisa langsung dipakai tanpa membuat pemodelan karakter 3d pada blender. Terdapat 3 karakter NPC yang akan  digunakan  dalam  pameran virtual dan  setiap  NPC memiliki  perannya  tersendiri  yaitu  sebagai  resepsionis, satpam, dan figuran pengunjung.
3. Pemodelan Objek 3D Assets
Pemodelan  Objek  3D  dibuat  sesuai  apa  yang  nanti dibutuhkan  dalam  pameran  virtual  dan  berbagai  jenis objek akan ditunjukkan sebagai berikut:
Gambar 19 Pemodelan Stand 3D
Pada  gambar  19  merupakan  pemodelan  stand  3D  yang digunakan  sebagai  tempat  melihat  produk  dari  masing- masing user yang sudah didaftarkan.
Gambar 20 Pemodelan Bingkai Produk 3D
Pada gambar 20 merupakan pemodelan bingkai produk 3D yang  digunakan  sebagai asset  environment yang  ada didalam pameran.
Gambar 21 Pemodelan Background Pameran 3D
Pada  gambar  21  merupakan  pemodelan  background pameran  3D  yang  digunakan  sebagai asset  environment yang ada didalam pameran.

## 3.4 Pengujian Sistem
Pada tahap pengujian sistem dikelompokkan berdasarkan proses-proses apa saja yang ada di dalam sistem.
3.4.1 Halaman Awal
Halaman  awal  merupakan  halaman  web  pertama  yang diakses oleh user pertama kali.

## Gambar 22 Tampilan Halaman Awal
Pada gambar 22 merupakan tampilan atau antarmuka yang sesuai  pada  desain  sistem  dimana  terdapat  penjelasan sekilas tentang virtual expo dan 4 tombol login,daftar,lihat produk  pameran  ,  kunjungi  pameran  yang  mempunyai fungsi yang berbeda. Tombol “login” untuk masuk dalam sistem, tombol ”daftar” untuk mendaftar akun pada sistem, tombol “lihat produk pameran” untuk melihat produk dari user yang sudah didaftarkan, tombol “kunjungi pameran” untuk mengunjungi pameran virtual Dan  jika  di  scroll  kebawah  terdapat  tampilan  produk- produk  pameran  dari user secara  otomatis  yang  sudah didaftarkan.

## 3.4.2 Halaman Dashboard User
Pada  gambar  23  merupakan  antarmuka  halaman  profil seusai masuk sesi login, di dalamnya terdapat logo umkm, nama dan nama UMKM sesuai akun yang sudah login.

## Melek IT

## Information Technology Journal. Vol 8 No 2 Jul - Des 2022, 124 - 128

## Gambar 23 Tampilan Halaman Dashboard User

## 3.4.3 Halaman Info Produk
Gambar 24 Tampilan Halaman Info Produk
Pada  gambar  24  merupakan  antarmuka  halaman  info produk, halaman ini sebagai halaman yang menampilkan produk-produk user yang sudah ditambahkan.
Terdapat 3 tombol yang mempunyai fungsi yang berbeda, tombol  “ubah”  untuk  mengubah  tiap  produk  yang  ingin diubah,  tombol  “hapus”  digunakan  untuk  menghapus sebuah  produk  yang  ingin  dihapus  oleh user , tombol “kembali” untuk kembali pada halaman dashboard user .
IV. HASIL DAN PEMBAHASAN

## 4.1 Implementasi Program
Pada  Implementasi  program  perangkat  lunak  ini  adalah sebuah  pengolahan  bahasa  pemograman,  dan  yang digunakan  adalah  bahasa  PHP,MYSQL  dan  C#  dalam pembangunan  sistem.  Oleh  karena  itu  akan  dibedakan menjadi  perfungsi  ataupun  proses.  Diantaranya  proses- proses pada sistem ini, yaitu:

## 4.1.1 Proses Pada Halaman Pendaftaran
Pada proses ini menggunakan source code bahasa PHP dan MYSQL  yang  ditunjukkan  pada  table  1  untuk menampilkan  proses  pendaftaran  user  yang  akan  masuk kedalam database.
Tabel 1 Source Code Halaman Pendaftaran
Implementasi  program  pada  halaman  pendaftaran  bisa dilihat pada tabel 4.1 4.1.2 Proses Pada Halaman Login Pada proses ini menggunakan source code bahasa PHP dan MYSQL  yang  ditunjukkan  pada  table  4.2  untuk menampilkan proses login user pada sistem.
Tabel 2 Source Code Halaman Login
Implementasi  program  pada  halaman  login  bisa  dilihat pada tabel 2.

## 4.1.3 Proses Pada Halaman Tambah Produk
Pada proses ini menggunakan source code bahasa PHP dan MYSQL  yang  ditunjukkan  pada  tabel  3.  untuk menampilkan proses user menambahkan sebuah produknya yang dimasukkan kedalam database.
Tabel 3. Source Code Halaman Tambah Produk
Implementasi program pada halaman tambah produk bisa dilihat pada tabel 3.

## 4.1.4 Proses Interaksi Pada NPC
Pada proses ini menggunakan source code bahasa C# yang ditunjukkan  pada  tabel  4  untuk  menampilkan  proses interaksi pada NPC.
Tabel 44 Source Code Interaksi NPC
$sql = "INSERT INTO users (nama,nama_umkm,username, email, password, logo_umkm) VALUES ('$nama','$namaumkm','$username', '$email', '$password','$logoumkm')"; echo
"<script>alert('Pendaftaran Berhasil.')</script>";
$username = "";
$email = ""; $_POST['password'] = ""; $_POST['cpassword'] = ""; } else { echo "<script>alert('Ada Kesalahan.')</script>"; } } else { echo "<script>alert('Email lain sudah terdaftar.')</script>";
} } else { echo "<script>alert('Password tidak sama.')</script>"; }
$sql = "SELECT  FROM users WHEREE email='email' AND password='password'";
$result = mysqli_query(conn, sql); if ($result->num_rows > 0) { $row =
mysqli_fetch_assoc($result); $_SESSION['id_user'] =
$row['id_user'];
$_SESSION['username'] =
$row['username']; $_SESSION['nama'] = $row['nama']; $_SESSION['nama_umkm'] = $row['nama_umkm']; $_SESSION['logo_umkm'] = $row['logo_umkm']; header("Location: welcome.php"); } else { echo "<script>alert('Email atau Password ada yang salah')</script>";
}
}
if (isset($_POST['submit'])) { $email = $_POST['email']; $password = $_POST['password']; $sql = "SELECT * FROM admin WHERE email='$email' AND password='$password'";
$result = mysqli_query($conn, $sql); if ($result->num_rows > 0) { $row = mysqli_fetch_assoc($result); $_SESSION['id_admin'] = $row['id_admin']; $_SESSION['nama'] =
$row['nama']; header("Location: welcome.php");
} else { echo "<script>alert('Email atau Password ada yang salah')</script>"; } } ?> <!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <link rel="stylesheet"
type="text/css" href="https://cdn.jsdelivr.net/npm/bootstra p@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/fo nt-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
type="text/css" href="style-login.css">
<title>Login</title> </head> <body> <div class="container"> <form action="" method="POST" class="login-email"> <p class="login-text" style="font-size: 2rem; font-weight: 800;">Login</p>
<div class="input- group">
<input
type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required> $source = $_FILES ['gambar_produk']['tmp_name']; $folder = './gambarproduk/';
move_uploaded_file($source,$folder.$gambarproduk ); $sql = "INSERT INTO produk (id_user,
jenisproduk, namaproduk, deskripsi, gambar_produk)
VALUES ('$user_id','$jenis_produk','$nama_produk','$des kripsi','$gambarproduk')"; $result = mysqli_query($conn,$sql); if($result){
echo "<script>alert('Produk Berhasil Ditambahkan')</script>";
}else { echo "<script>alert('Ada Kesalahan')</script>"; }
} ?> <!DOCTYPE html> <html lang="en">
<head>
<title> Tambah Produk </title> <link rel="stylesheet" type="text/css" href="tambah-produk.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstra p@5.1.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="text-box-center"> <div class="row">
<div class="col-md-18 form-1">
<h2>Tambah Produk</h2>
<form action="" method="POST" enctype="multipart/form-data"> <label id="userid" name="userid">ID
USER : <?php echo $_SESSION['id_user'] ;?>

## pISSN: 2442-3386  eISSN: 2442-4293

## Vol 8 No 2 Jul – Des  2022, 125 - 128
Implementasi  program  interaksi  pada  NPC  bisa  dilihat pada tabel 4.
4.1.5 Proses Interaksi Environment Pada proses ini menggunakan source code bahasa C# yang ditunjukkan  pada  tabel  5  untuk  menampilkan  proses interaksi environment atau assets pada pameran virtual.
Tabel 5 Source Code Interaksi Environment
Implementasi  program  pada  interaksi  environment  bisa dilihat pada tabel 5.
4.2 Uji Coba Fitur
4.2.1 Tampilan Awal Virtual Expo
Untuk  memulai  masuk  pada  pameran virtual  user harus melewati  tahap  menu splash  screen untuk  masuk  pada pameran virtual .
Gambar 25 Splash Screen Virtual Expo
Pada gambar  25 merupakan splash screen pada pameran virtual setelah user meng-klik “Kunjungi Pameran” pada halaman  utama  web  dan  terdapat  tombol  “masuk”  jika ditekan maka menuju pameran virtual .
Gambar 26 Tampilan Awal Virtual Expo Pada gambar 26 merupakan tampilan awal setelah masuk pada menu splash screen , yang terdapat panduan kontrol untuk user .  Dalam  panduan  terlihat  jelas  tombol  pada keyboard  yang  berfungsi  sebagai  kontrol  dari  karakter seperti tombol “ESC” untuk kembali, tombol “W,A,S,D” untuk berjalan, tombol “E” untuk interaksi, tombol “Left Shift”  untuk  lari,  tombol  “Space”  untuk  lompat  dan pergerakan  mouse  untuk  mengatur  fungsi  kamera  yang mengikuti gerakan karakter
4.2.2 Menampilkan Fungsi Interaksi Pada Environment Sebelum  memulai  interaksi, user dimunculkan  notif “tekan E melihat” untuk memulai melihat gambar produk dalam bentuk aslinya 2D.
Gambar 27 Notif Interaksi Environment
Gambar 27 merupakan tampilan muncul notif tombol “E” pada keyboard untuk memulai interaksi pada environment dan jika ditekan maka akan muncul seperti pada gambar 28.

## Gambar 28 Interaksi Assets 3D
Gambar 28 merupakan tampilan interaksi pada assets 3D atau environment yang  sudah  disiapkan  pada  pameran virtual , bertujuan agar user tertarik dengan ruang lingkup yang ada di dalam pameran .dan terdapat tombol “ESC” pada keyboard untuk menutup tampilan gambar assets 3D. 4.2.3 Menampilkan Fungsi Interaksi Pada NPC Sebelum  memulai  interaksi, user dimunculkan  notif “tekan  E  untuk  chat”  untuk  memulai  percakapan  pada NPC.
if(Input.GetKeyDown(KeyCode.E) && enter && !talking &&
Time.timeScale != 1.0f){ //checking  if  player  is  in  range,  not  currently in dialog and game is not paused chatText.SetActive(false); NextMessage(); } if (Time.timeScale == 0){ talking = true; Invoke("EnableTalking",
0.1f);
//This  is  a  "cooldown"  for  the  dialogue,  so  it doesnt start just when it finishes } } protected void OnTriggerExit (Collider other) {
if(other.CompareTag("Player")) { chatText.SetActive(false); s = 0; enter = false; CloseTalk(); // Debug.Log("out of trigger"); } } void OnTriggerStay(Collider plyr)
{ if (plyr.gameObject.tag == "Player") { Text.SetActive(true); if (Input.GetButtonDown("Use")) { Text.SetActive(false); Image.SetActive(true); } {
if(Input.GetButtonDown("Cancel")) { Image.SetActive(false); } } } }
void OnTriggerExit(Collider plyr) { if (plyr.gameObject.tag == "Player") { Text.SetActive(false); } } }

## Melek IT
Information Technology Journal. Vol 8 No 2 Jul - Des 2022, 126 - 128

## Gambar 29 Notif Interaksi NPC
Gambar 29 merupakan tampilan muncul notif tombol “E” pada keyboard untuk memulai interaksi  percakapan pada NPC dan  jika  ditekan  maka  akan  muncul  seperti  pada gambar 30.
Gambar 30. Interaksi NPC
Gambar 30 merupakan tampilan interaksi percakapan pada NPC  untuk  menanyakan  seputar  tentang  pameran  dan terdapat  dua  pilihan  percakapan  yang  pertama  yakni “tempat apa ini?” untuk menanyakan tentang pameran dan “Kembali” untuk menutup percakapan.
4.2.4 Menampilkan Fungsi Lihat Produk Sebelum  memulai  interaksi, user dimunculkan  notif “tekan E untuk melihat” untuk melihat produk.
Gambar 31 Notif Interaksi Lihat Produk
Gambar 31 merupakan tampilan muncul notif tombol “E” pada  keyboard  untuk  memulai  interaksi  pada  pameran produk  dan  jika  ditekan  maka  akan  muncul  seperti  pada gambar 32.
Gambar 32. Interaksi Melihat Produk User
Gambar 32 merupakan tampilan interaksi pada bingkai 3D produk untuk melihat penjelasan dari setiap gambar pada
produk  yang  dilihat dan  terdapat  penjelasan  seperti  jenis produk,nama  produk  dan  deskripsi  dari  produk.  Tombol “ESC” untuk menutup tampilan pada produk pameran.
4.2.5 Ruang Lingkup Virtual Expo
Gambar 33 Tampilan Ruang Lingkup Main Hall
Gambar merupakan bentuk tampilan ruang lingkup dalam main hall pada pameran virtual yang terdapat assets-assets yang telah dipersiapkan sedemikian rupa seperti panggung background , meja dan kursi, pamflet dan lain-lain.
Gambar 34 Tampilan Ruang Lingkup Stand Hall
Gambar  34  merupakan  bentuk  tampilan  ruang  lingkup dalam  stand  hall  atau  aula  stand  produk  pada  pameran virtual yang terdapat assets stand sebagai tempat melihat produk-produk user dan assets lainnya  yang  telah dipersiapkan  sedemikian  rupa  seperti  meja  dan  kursi, pamflet pameran.

## V. PENUTUP

## 5.1. Kesimpulan
Berdasarkan  penelitian  ini  dengan  adanya virtual  expo pengenalan  produk  dalam  negeri  berbasi web dapat disimpulkan diantara berbagai hal sebagai berikut:
1. Pameran virtual atau virtual  expo pengenalan produk  dalam  negeri  berbasis web dapat membantu masyarakat khususnya pelaku UMKM dapat memperkenalkan produknya  dengan
mudah meskipun dalam keadaan pandemic .
2. Pameran virtual atau virtual  expo pengenalan produk dalam negeri berbasis web dibuat dengan rancangan  yang  mempermudah  bagi user untuk memperkenalkan produknya sehingga konsumen lebih tertarik.

## 5.2. Saran
Saran  dari  hasil  dan  analisa  terhadap  virtual  expo pengenalan produk dalam negeri berbasis web agar dapat dikembangkan  lebih  lanjut  dan  bisa  lebih  baik  ke depannya, yaitu sebagai berikut:

## pISSN: 2442-3386  eISSN: 2442-4293

## Vol 8 No 2 Jul – Des  2022, 127 - 128
1. Membuat fitur realtime database sehingga setiap user yang login bisa berinteraksi satu sama lain.
2. Setiap  produk  di  rancang  untuk  menuju  kearah penjualan e-commerce seperti shopee,tokopedia, agar konsumen yang tertarik pada produknya bisa langsung diarahkan ke link penjualan.

## DAFTAR PUSTAKA
[1] Amri,  A.  (2020).  Dampak  Covid-19  Terhadap UMKM di Indonesia.
[2] Antara. (2020, June). Pameran Virtual Jadi Solusi di Republika.
[3] Moch. Husein (2017,Januari) Pembuatan Marketplace  Sebagai  Media  Promosi  Online Lembaga  Kursus  dan  Pelatihan  Provinsi  Jawa Timur, Melek IT Information Technology Journal.
[4] Dwi  Saras  Wati  (2016,Juli)  Interaktif  Augmented Reality  Sebagai  Media  Promosi  Penjualan Perumahan,  Melek  IT  Information  Technology Journal.
[5] Foo,  S.  (2008).  Online  Virtual  Exhibitions: Concepts and Design Considerations.
[6]      I.  Rochman  and  A.  K.  Adisusilo,  “APLIKASI VIRTUAL  TOUR  PENJUALAN  PERUMAHAN BERBASIS AUGMENTED REALITY”, MelekIT , vol. 7, no. 2, pp. 23–32, Dec. 2021.
[7] Philip Kotler, 2002, Manajemen Pemasaran, Edisi Millenium, Jilid 2, PT Prenhallindo, Jakarta
[8] Tjiptono, Fandy, 2008, Strategi Pemasaran , Edisi 3, ANDI: Yogyakarta
[9] Tambunan,  Tulus,  “Usaha  Mikro  Kecil  dan Menengah di Indonesia : isu-isu penting”, Jakarta : LP3ES, 2012.
[10] Jogiyanto  HM,  Akt,  MBA,  Ph.  D, Analisis  & Desain  Sistem  Informasi ,  (edisi  kedua,  cetakan kedua), Andi Offset, Yogyakarta,2002.
[11] Y. Kustiyahningsih, D. Rosa, Pemrograman Basis Data  Berbasis  WEB  Menggunakan  PHP  dan Mysql , Yogyakarta: Graha Ilmu, 2011.
[12] Takahashi,  D.  (2014).  John  Riccitiello  sets  out  to identify  the  engine  of  growth  for  Unity Technologies (interview).
[13] A. S., Rosa dan Shalahuddin, M. (2013). Rekayasa Perangkat  Lunak  Terstruktur  dan  Berorientasi Objek. Bandung: Informatika.
[14] Purbadian,  Yenda.  2016.  Trik  Cepat  Membangun Aplikasi  Berbasis  Web  dengan  Framework CodeIgniter. Yogyakarta: Andi Offset.
[15] Rahadian,  M.  F.,  Suryanto,  A.  &  Maharani,  S., 2016.  Penerapan  Metode  Finite  State  Machine Pada Game "The Relationship". Jurnal Informtika Mulawarman
[16] Iwan  Setiawan.  2006.  Perancangan  Software Embedded  System  Berbasis  FSM.  Universitas Dipenogoro.

## Melek IT
Information Technology Journal. Vol 8 No 2 Jul - Des 2022, 128 - 128
[Halaman ini sengaja dikosongkan]