http://sistemasi.ftik.unisi.ac.id

## Implementasi Distorsi Gambar Pada Mockup Desain Dalam Aplikasi Penjualan Mug Berbasis Web

## Implementation of Image Distortion to Design Mockups in Web-Based Mug Sales Application
Kristy Tiffani
Program Studi Sistem Informasi, Fakultas Teknologi Informasi, Universitas Tarumanagara, Jalan Letjen S. Parman No. 1 Grogol, Jakarta Indonesia *e-mail: kristytiffani1102@gmail.com
( received : 2 April 2023, revised : 14 April 2023, accepted : 19 April 2023)

## Abstrak
Varisty Mug Souvenir merupakan badan usaha kecil yang menyediakan jasa membuat mug souvenir kustom  sesuai  dengan  permintaan  pelanggan.  Mug  souvenir  adalah  produk  utama  yang  diproduksi oleh  Varisty  Mug  Souvenir.  Pada  saat  pandemi  COVID-19  melanda,  toko  utama  Varisty  Mug Souvenir  terpaksa  ditutup,  Hal  ini  mengakibatkan  gangguan  transaksi  antara  pelanggan  dengan pemilik  dan  penjualan  Varisty  Mug  Souvenir  mengalami  penurunan.  bertujuan  untuk  meningkatkan penjualannya serta mempermudah proses transaksi bisnis dengan merancang aplikasi penjualan mug berbasis web dengan fitur membuat mockup desain mug. Fitur pembuatan mockup desain mug pada aplikasi  akan  membantu  pelanggan  dalam  memvisualisasikan  dan  membuat  keputusan  desain  saat melakukan  pemesanan.  Pengembangan  aplikasi  web  penjualan  mug  berbasis  web  ini  akan menggunakan Hypertext  Preprocessor (PHP)  sebagai  bahasa  pemrograman  dan framework  Laravel serta database MySQL. Pembuatan fitur mockup desain mug  menggunakan teknologi ImageMagick untuk  fitur  menghasilkan  mockup  desain  mug  yang  menerapkan  distorsi  gambar.  Penggunaan imageMagick dilakukan  dengan  menjalankan  script  command  pada  command-line.  Pada  aplikasi pelanggan  dapat  melakukan  pemesanan  mug  kustom  dengan  melihat  pratinjau  mockup  mug  dari desain yang diinginkan. Selain itu, pada aplikasi bagian admin memungkinkan admin mengolah data toko.
Kata kunci: Mockup produk, Distorsi Gambar, ImageMagick , Aplikasi penjualan, Mug souvenir

## Abstract
Varisty Mug Souvenir is a small business entity that provides services to make custom souvenir mugs according  to  customer  requests.  Souvenir  mugs  are  the  main  product  produced  by  Varisty  Mug Souvenir. When the COVID-19 pandemic hit, Varisty Mug Souvenir's main shop was forced to close, this resulted in disruption of transactions between customers and owners and Varisty Mug Souvenir's sales decreased. aims to increase its sales and simplify the business transaction process by designing a web-based mug sales application with the feature of creating mug design mockups. The mug design mockup creation feature on the application will help customers visualize and make design decisions when  placing  an  order.  The  development  of  a  web-based  mug  sales  web  application  will  use  the Hypertext  Preprocessor  (PHP)  programming language  and  use the  Laravel framework  and  MySQL database.  The  creation  of  the  mug  design  mockup  feature  uses  ImageMagick  technology  for  the feature  of  generating  mug  design  mockups  that  apply  image  distortion.  The  use  of  ImageMagick  is done by running the command script on the command-line. In the application, customers can place an order for a custom mug by previewing the mug mockup of the desired design. In addition, the admin part of the application allows the admin to process and store data.
Keywords: Product mockup, Image Distortion, ImageMagick, Sales application, Souvenir mug

## 1 Pendahuluan
Perkembangan teknologi senantiasa mengalami peningkatan pesat seiring berjalannya waktu dan mempengaruhi  banyak  bidang.  Salah  satu  bidang  yang  menjadi  sorotan  disini  adalah  bidang  bisnis. Setiap  perusahaan  dan  profesional  bisnis  harus  beradaptasi  dengan  perkembangan  teknologi  untuk dapat bertahan di dunia bisnis [1].
Pandemi  COVID-19  telah  memaksa  pengenalan  yang  cepat  terhadap  inovasi  digital  dalam hampir  semua  bidang  kehidupan.  Lockdown  besar-besaran  dan  pergeseran  ke  arah  teknologi  digital memaksa orang untuk beradaptasi dengan inovasi teknologi dalam rutinitas sehari-hari dalam format online baru [2]. Pada kondisi sekarang, banyak toko-toko dan bisnis kecil berfokus pada pasar online dan  sebagian  besar  berinvestasi  dalam  layanan  online  [3].  Dengan  semakin  meningkatkan  badan usaha  online,  Varisty  Mug  Souvenir  berusaha  untuk  mengikuti  perkembangan  zaman  agar  dapat bersaing dengan badan usaha lain.
Varisty  Mug  Souvenir  merupakan  badan  usaha  kecil  yang  menyediakan  jasa  membuat  mug souvenir  kustom  sesuai  dengan  permintaan  pelanggan.  Mug  souvenir  adalah  produk  utama  yang diproduksi oleh Varisty Mug Souvenir. Varisty Mug Souvenir belum didukung oleh aplikasi apapun untuk  segala  macam  proses  transaksi.  Proses  transaksi  antara  pelanggan  dan  pemilik  dilakukan melalui  telepon,  chat,  ataupun  secara  tatap  muka.  Pelanggan  berdiskusi  secara  langsung  dengan Varisty  Mug  Souvenir  tentang  produk  dan  sampel  order.  Semua  proses  transaksi  masih  dilakukan secara manual.
Pada  saat  pandemi  COVID-19  melanda,  toko  utama  Varisty  Mug  Souvenir  terpaksa  ditutup, Dengan kondisi ini, pemilik dan pelanggan tidak dapat melakukan transaksi dan diskusi secara tatap muka.  Hal  ini  mengakibatkan  gangguan  transaksi  antara  pelanggan  dengan  pemilik  dan  penjualan Varisty  Mug  Souvenir  mengalami  penurunan.  Varisty  Mug  Souvenir  bertujuan  untuk  meningkatkan penjualannya serta mempermudah proses transaksi bisnis dengan merancang aplikasi penjualan mug berbasis web dengan fitur hasil mockup desain mug.
Aplikasi  penjualan  mug  berbasis  web  Varisty  Mug  Souvenir  akan  menyediakan  portal  digital untuk  pelanggan  melakukan  pemesanan  dan  pengiriman  desain  kustom  secara  online  tanpa  harus mendatangi toko. Fitur pembuatan mockup desain mug akan membantu pelanggan dalam memberikan bayangan  dan  membuat  keputusan  desain  yang  akan  dipakai  dalam  pesanan.  Hal  ini  juga  akan meminimalisir  pembuatan  sampel  berlebihan  akibat  keraguan  pelanggan  dalam  memutuskan  desain yang cocok.
Berdasarkan  permasalahan  tersebut,  tujuan  dari  penelitian  yang  dilakukan  adalah  perancangan aplikasi penjualan mug souvenir berbasis web untuk Varisty Mug Souvenir. Aplikasi yang dibangun akan  menjadi  sarana  untuk  pelanggan  melakukan  proses  pembelian.  Pelanggan  dapat  melihat  hasil mockup  desain  mug  dan  hasil  sampel  dengan  lebih  mudah  dengan  aplikasi.  Hasil  utama  yang  ingin dijangkau  dari  penelitian  ini  adalah  aplikasi  web  dapat  menjadi  sarana  promosi,  informasi,  dan transaksi penjualan utama bagi Varisty Mug Souvenir.

## 2 Tinjauan Literatur
Penelitian oleh Wibowo et al. [4] melakukan pengembangan aplikasi berbasis web untuk proses pemesanan kue kustom pada toko kue artisan. Proses transaksi pemesanan kue terbagi menjadi proses penentuan  desain  kustomisasi  kue  dan  proses  pemesanan  kue.  Penelitian  bertujuan  untuk mengembangkan  sistem  informasi  untuk  pengelolaan  proses  pemesanan  dan  desain  kue.  Meskipun terdapat perbedaan bidang bisnis, objek penelitian memiliki kemiripan dalam aspek proses transaksi pemesanan yaitu terdapat proses kustomisasi desain untuk pemesanan produk. Penelitian Wibowo et al ,  berfokus  terhadap  fitur  pembuatan  desain  kue  secara  online  yang  dilakukan  dalam  proses pemesanan.  Pelanggan  dapat  membuat  desain  kue  secara  online  langsung  pada  aplikasi  web. Sedangkan pada penelitian ini memfokuskan pada fitur generate mockup mug dengan desain kustom dari  pelanggan.  Fitur  generate  mockup  akan  menerima  foto  desain  dari  pelanggan  dan  melakukan distorsi gambar hingga menyesuaikan dengan bentuk mug.
Priyotomo [5] mengembangkan sebuah sistem pengelolaan data pemesanan suku cadang sepeda motor  kustom  dan  jasa  pembuatan  sepeda  motor  berbasis  web.  Tujuan  penelitian  tersebut  adalah mengembangkan  sistem  pengelolaan  data  pesanan  pada  Bengkel  Maju  Utama  secara  sistematis. Bengkel  Maju  Utama  yang  merupakan  bisnis  yang  bergerak  pada  bidang  otomotif  berfokus  dalam
pembuatan  dan  penjualan  suku  cadang  berfokus  pada  sepeda  motor  kustom  dan  layanan  jasa pembuatan  kustom  sepeda  motor.  Objek  penelitian  memiliki  proses  bisnis  yang  mirip  yaitu menangani  produk  yang  itu  kustomisasi.  Penelitian  Priyotomo  merupakan  kustomisasi  motor  dan penelitian  ini  menangani  kustomisasi  mug.  Kekurangan  dari  penelitian  adalah  tidak  memiliki  fitur atau sistem khusus yang menangani proses kustomisasi produk. Pelanggan mengisi form pemesanan tanpa ada visualisasi hasil akhir produk.
Halid et  al. [6]  mengembangkan  sebuah  sistem  pemesanan  batik  dengan  fitur  kustomisasi berbasis  mobile.  Penelitian  ini  bertujuan  untuk  merancang  aplikasi pemesanan  dan  fitur  kustomisasi yang  berfungsi  sebagai  platform  pelanggan  mengekspresikan  desain  batik.  Penelitian  Halid et  al. berfokus  pada  pengembangan  fitur  kustomisasi  yang  akan  membantu  pelanggan  dalam  membuat desain  secara  langsung  pada  aplikasi.  Kemiripan  antara  penelitian  adalah  menangani  proses kustomisasi pada produk penjualan. Sedangkan pada penelitian ini memfokuskan pada fitur generate mockup mug dengan desain kustom dari pelanggan.
Pada  ketiga  penelitian  sebelumnya  melakukan  penelitian  terhadap  produk  kustomisasi  yang menerapkan  sistem  pembuatan  desain  secara online .  Namun,  penelitian  tidak  menerapkan  sistem untuk  menampilkan  pratinjau  hasil  produk  dari  desain  kustom  yang  ada.  Pada  penelitian  ini  akan memfokuskan terhadap fitur pembuatan mockup desain mug dari gambar desain pelanggan. Aplikasi online  yang  ada  saat  ini  adalah  seperti Smartmockups [7].  Fitur  utama  pada Smartmockups adalah memungkinkan pengguna membuat mockup produk berdasarkan desain yang diinginkan. Pembuatan mockup produk pada Smartmockups mencakup banyak produk seperti kaos, topi, tas, bantal, dan lain- lain.  Penelitian  ini  akan  menerapkan  fitur  yang  mirip  dan  berfokus  pada  produk  mug  pada  aplikasi penjualan  mug  pada  Varisty  Mug  Souvenir.  Fitur  pembuatan mockup desain  mug  akan  membantu pelanggan  dalam  memberikan  bayangan  dan  membuat  keputusan  desain  yang  akan  dipakai  dalam pesanan.  Penelitian  ini  tidak  memiliki  akses  untuk  mengetahui  detail  metode  dan  teknologi  yang digunakan pada pembuatan fitur di Smartmockups .
Dengan  begitu  penelitian  ini  akan  menggunakan software  ImageMagick dalam  pembuatan  fitur pembuatan mockup desain. ImageMagick merupakan open-source  software gratis  yang  digunakan untuk meng-edit dan memanipulasi gambar digital  [8]. Operator ImageMagick yang akan digunakan adalah distorsi gambar. Penerapan ImageMagick distorsi gambar desain menyesuaikan dengan bentuk lingkar  mug  sehingga  menampilkan  pratinjau  hasil  akhir  mug  dengan  desain  pelanggan.  Pada penggunaan ImageMagick terdapat command  script yang  dijalankan  pada command-line interface. Ada  berbagai  macam script ImageMagick dengan  fungsi  distorsi  gambar.  Gambar  1  menunjukkan contoh hasil script ImageMagick yang melakukan distorsi gambar bentuk kotak [9].
Gambar 1.  Contoh hasil script ImageMagick melakukan distorsi gambar.
Penelitian  oleh  Lau  Chi  Wing  [10]  mengembangkan  sistem  ruang fitting baju  digital  berbasis web menggunakan teknologi ImageMagick . Penelitian bertujuan untuk penerapan ruang fitting digital pada  web  belanja  online  yang  dapat  mempermudah  pelanggan  dalam  memilih  pakaian  yang  ingin beli. Teknologi ImageMagick digunakan dalam menghasilkan gambar fitting dua dimensi pada model baju yang diproses dengan desain dan pola keinginan pelanggan. Penelitian oleh Lau Chi Wing juga menggunakan ImageMagick dengan  objek  penelitian  yang  berbeda  yaitu  baju.  Sedangkan,  objek penelitian ini adalah produk mug.

## 3 Metode Penelitian
Metode yang digunakan dalam penelitian ini adalah metode SDLC ( Software Development Life Cycle )  dengan  model waterfall model.  Model waterfall memiliki  prinsip  menjadwalkan merencanakan  semua  aktivitas  proses  sebelum  pengembangan  dimulai.  Setiap  tahap-tahap pengembangan  dijalankan  satu  demi  satu  dan  mengalir  ke  bawah  seperti  air  terjun  [11]. Waterfall digunakan  pada  penelitian  ini  karena  memiliki  struktur  model  lurus  sehingga  sasaran  akhir  hasil penelitian  terlihat  jelas.  Gambar  2  menunjukkan  tahap-tahap  model waterfall yang  mencerminkan dasar pengembangan sistem [12].
Gambar 2.  Diagram tahap pengembangan sistem pada SDLC waterfall model.
Pada tahap requirements definition pencarian data dan analisis tentang layanan sistem, batasan, dan sumber penelitian dilakukan untuk memahami aplikasi web dan fitur yang dibutuhkan oleh toko Varisty  Mug  Souvenir.  Analisis  dan  pencarian  data  dilakukan  dengan  wawancara  dengan  pemilik toko, observasi proses bisnis, serta dokumentasi produk toko. Tahap ini bertujuan untuk memperoleh dan memahami kebutuhan Varisty Mug Souvenir yang akan diimplementasikan pada website . Rincian dan fitur-fitur yang diperlukan pada aplikasi web sesuai dengan kebutuhan dan proses bisnis Varisty Mug Souvenir.
Pada  tahap system  and  software  design perancangan  arsitektur  sistem  secara  keseluruhan  yang akan  menjadi blueprint dilakukan  dalam  proses  pengembangan  aplikasi  web.  Dalam  proses  desain digunakan Unified Modeling Language (UML) untuk membuat Use Case Diagram, Activity Diagram, Sequence  Diagram,  Class  Diagram, dan Windows  Navigation  Diagram. Perancangan  basis  data digunakan pada proses pembuatan aplikasi web. Selain itu, terdapat desain Wireframe User Interface yang menjadi panduan dan gambaran untuk tampilan aplikasi web.
Berdasarkan desain sistem dari tahap sebelumnya, penulis mewujudkan software dengan proses pembuatan  kode  program software. Perancangan  aplikasi  web  ini  akan  menggunakan Hypertext Preprocessor (PHP)  sebagai  bahasa  pemrograman  ditunjang  dengan framework Laravel, database MySQL,  serta tools dan packages pendukung  yang  dibutuhkan  untuk  perancangan  aplikasi  web Varisty  Mug  Souvenir.  Salah  satunya  adalah Imagemagick yang  digunakan  untuk  fitur  pembuatan desain mockup mug souvenir.
Pada  tahap integration  and  system  testing pengujian  secara  menyeluruh  dilakukan  terhadap aplikasi  yang  telah  dibangun.  Tahap  ini memastikan  aplikasi  yang  telah  dibangun  bekerja  dengan sempurna  dan  sesuai  dengan  tujuan  aplikasi.  Metode  pengujian Black  Box akan  digunakan  dalam pengujian aplikasi. Pengujian dilakukan dalam satu aliran dari proses awal hingga proses akhir oleh pengguna aplikasi.
Pada  tahap operation  and  maintenance ini  dilakukan  penerapan  atau  penyebaran  aplikasi  yang telah  dibangun  dan  diuji  ke  lingkungan  pasaran  luas.  Proses  pemeliharan  mencakup  memperbaiki kesalahan atau kekurangan yang ditemukan untuk memastikan aplikasi terus berjalan secara optimal. Pemeliharaan  yang  dilakukan  mencakup bug yang  ditemukan, database, maupun  penyesuaian  fitur- fitur aplikasi.
http://sistemasi.ftik.unisi.ac.id
4 Hasil dan Pembahasan

## 4.1 Requirements analysis and definition
Pada  tahap  ini  dilakukan  pencarian  data  dan  analisis  melalui  wawancara  dengan  pemilik  toko, observasi  proses  bisnis,  serta  dokumentasi  produk  untuk  memahami  aplikasi  web  dan  fitur  yang dibutuhkan oleh toko Varisty Mug Souvenir. tahap ini berfokus pada pemahaman proses bisnis yang terjadi  di  Varisty  Mug  Souvenir.  Rincian  proses  transaksi  antara  pelanggan  dengan  pemilik.  Hasil analisis menjadi panduan proses pembuatan desain  arsitektur sistem dan fitur-fitur yang dibutuhkan. Berikut ini merupakan rincian proses transaksi pemesanan kustom mug pada Varisty Mug Souvenir.
1. Pelanggan  menghubungi  Varisty  Mug  Souvenir  untuk  melakukan  pemesanan  mug  kustom dengan  rincian  pesanan  seperti  jenis  mug,  jumlah  pesanan,  serta  foto  desain  kustom  yang diinginkan pada mug.
2. Varisty Mug Souvenir menerima pesanan dan membuat sampel berdasarkan jenis mug dan foto desain  pesanan.  Kemudian  foto  hasil  sample  akan  dikirimkan  ke  pelanggan.  Jika  pelanggan menyetujui sampel, maka pesanan akan lanjut diproses. Namun, jika pelanggan tidak menyetujui sample, maka akan dilakukan koreksi desain atau perubahan desain sesuai keinginan pelanggan dan pembuatan sampel baru. Proses ini akan berulang hingga pelanggan menyetujui hasil sampel.
3. Berdasarkan  hasil  sampel dan  desain  kustom  yang  disetujui,  Varisty  Mug  Souvenir akan  mulai memproduksi pesanan mug sesuai jumlah pesanan serta pengemasan mug.
4. Setelah  pesanan  sudah  selesai  produksi,  Varisty  Mug  Souvenir  akan  mengirimkan  pesanan menggunakan  cara  pengiriman  dan  ekspedisi  yang  pilih  oleh  pelanggan.  Pesanan  diterima  oleh pelanggan dan pembayaran di selesaikan.

## 4.2 System and software design
Pada  tahap  ini  dilakukan  perancangan  arsitektur  sistem  menggunakan Unified  Modeling Language  (UML) untuk  membuat Sequence  Diagram,  Class  Diagram,  Use  Case  Diagram,  Activity Diagram, dan Windows  Navigation  Diagram. Selain  itu,  terdapat  desain Wireframe  User  Interface yang menjadi panduan dan gambaran untuk tampilan aplikasi web.
Perancangan Use Case Diagram mewakili interaksi antara eksternal entitas dan sistem perangkat lunak. Dalam rancangan Use case diagram pada sistem ini, terdapat tiga jenis actor yaitu: (i) customer yang  mewakili  pelanggan  toko,  (ii) guest yang  mewakili  pengunjung  aplikasi  web,  dan  (iii) admin yang mewakili pemilik toko. Tampilan Use Case Diagram dapat dilihat pada Gambar 3.
Perancangan  basis  data  berdasarkan  konsep  dasar  dan  hubungan  yang  diidentifikasi  dalam sistem. Berdasarkan  teori  dari Louis  Davidson [13] dilakukan  perancangan  basis  data  dalam  bentuk basis  data  logical  atau Logical  Database  Design. Berbeda  dengan conceptual  database  design, di mana  rancangan  berfokus  pada  gambaran  besar, logical  database  design akan  berfokus  pada  detail dari database [13]. Perancangan basis data logical dapat dilihat pada Gambar 4.
Gambar 4.  Rancangan basis data logical.

## 4.3 Implementasi
Proses pembangunan aplikasi web berdasarkan analisis dan desain kerangka sistem yang menjadi panduan. Dalam penelitian ini pembuatan aplikasi akan menggunakan PHP  serta framework Laravel dan framework Bootstraps. Framework Laravel  didasarkan  pada  gaya  arsitektur  MVC  ( Model  View Controller pattern). Laravel memiliki sejumlah fitur yang didukung, yang merupakan serangkaian ciri khas  berharga  yang  dapat  meningkatkan  efisiensi  dan  mempercepat  pengembangan  web  [14]. Database yang digunakan pada penelitian ini adalah MySQL.
Tampilan hasil perancangan dan pembuatan halaman katalog pada aplikasi penjualan mug dapat dilihat pada Gambar 5. Halaman katalog menampilkan list produk yang tersedia dan pelanggan dapat memilih produk untuk proses pemesanan.
Setelah  pelanggan  memilih  produk  mug  yang  ini  di  pesan,  maka  akan  menampilkan  halaman produk  details.  Dari  halaman  produk  details,  pelanggan  dapat  melakukan  pesanan.  Tampilan  hasil perancangan dan pembuatan halaman detail mug ditunjukkan pada Gambar 6.

## Gambar 6.  Tampilan halaman produk details.
Pelanggan  selesai  melakukan  pemesanan  akan  berpindah  ke  halaman  checkout  yang menampilkan  dan  mengisi  form  details  pemesanan  yang  diinginkan.  Tampilan  rancangan  dan pembuatan halaman checkout order ditunjukkan pada Gambar 7.
Gambar 7.  Tampilan halaman checkout order.
Setelah  melakukan checkout  order, pelanggan  akan  berpindah  ke  halaman generate  mockup desain  mug.  Pelanggan  akan  memilih  foto  desain  yang  diinginkan  dan  memotong  gambar  sesuai dengan  ukuran  mug  tersebut.  Tampilan  pemilihan  dan  pemotongan  foto  pada  halaman generate mockup desain ditunjukkan pada Gambar 8.
http://sistemasi.ftik.unisi.ac.id
Gambar 8.  Memotong gambar desain pada halaman generate mockup.
Dari  foto  desain  yang  sudah  di- crop menjadi  ukuran  yang  sesuai  akan  dilakukan generate mockup mug. Mockup mug akan menampilkan foto desain yang ditempelkan pada sebuah mug. Pada penelitian ini menggunakan imageMagick untuk pembuatan fitur generate mockup mug. Penggunaan imageMagick adalah  dengan  menjalankan script  command pada command-line .  Melalui project Laravel  akan  membuka  Cygwin command-line  interface dan  menjalankan script  command imageMagick khusus  memanipulasi  foto  agar  sesuai  dengan  bentuk  mug.  Tampilan script imageMagick untuk generate mockup mug dapat dilihat pada Gambar 9.
Gambar 9.  script imageMagick untuk generate mockup mug.
Dari script  command-line tersebut,  “ ./cylinderize ”  adalah  nama script yang  dapat dieksekusi yang melakukan efek silinderisasi. Selain itu, pada script command terdapat setting lokasi gambar  menyesuaikan  dengan  gambar mockup mug.  Dari script  command-line tersebut  akan menghasilkan  gambar  distorsi  desain  menyesuaikan  dengan  bentuk  gambar mockup mug.  Gambar background  mockup mug  dapat  dilihat  pada  Gambar  10.  Tampilan  hasil  menjalani script imageMagick pada halaman generate mockup mug ditampilkan pada Gambar 11.
Volume 12, Nomor 2, Mei 2023: 465-476
http://sistemasi.ftik.unisi.ac.id
Gambar 10. Gambar background mockup mug.
Gambar 11.  Gambar hasil mockup pada halaman generate mockup mug.
Pada aplikasi penjualan mug di Varisty Mug Souvenir terdapat sistem khusus admin. User admin dapat  melakukan  penambahan,  pengeditan,  penghapusan  data  pesanan,  pelanggan,  produk, delivery, sampel , invoice, dan message. Tampilan hasil perancangan dan pembuatan halaman dashboard untuk sisi admin ditunjukkan pada Gambar 12.
http://sistemasi.ftik.unisi.ac.id

## Gambar 12.  Dashboard admin
Halaman product,  customer,  order,  invoice,  sample,  delivery, dan  admin  memiliki  desain  yang sama  serta  memiliki  fitur  yang  sama.  Pada  aplikasi  web  sisi  admin,  admin  dapat  melakukan penambahan data, pengeditan data, dan penghapusan data. Hasil perancangan dan pembuatan halaman product untuk sisi admin pada aplikasi penjualan mug ditunjukkan pada Gambar 13.
Gambar 13.  Halaman produk yang memiliki desain yang sama dengan menu lainnya.

## 4.4 Integration and system testing
Setelah  selesai  pembuatan  aplikasi  web,  dilakukan  pengujian  secara  menyeluruh  terhadap aplikasi  yang  telah  dibangun.  Tahap  ini memastikan  aplikasi  yang  telah  dibangun  bekerja  dengan sempurna dan sesuai dengan tujuan aplikasi. Metode pengujian yang akan digunakan  pada tahap ini adalah  pengujian black-box. Pengujian black-box didasarkan  sepenuhnya  pada  spesifikasi  program, dan tanpa ada pengetahuan tentang cara kerja dari kode program. Pengujian black-box bertujuan untuk memverifikasi  bahwa  program  tersebut  memenuhi  persyaratan  yang  ditentukan,  tanpa  pengetahuan tentang  implementasi  program  [15].  Pengujian  dilakukan  dalam  satu  aliran  dari  proses  awal  hingga proses  akhir  pemesanan  mug  oleh  pengguna  akhir.  Tabel  1  menunjukkan  hasil  pengujian black  box terhadap aplikasi penjualan mug Varisty Mug Souvenir.
http://sistemasi.ftik.unisi.ac.id
Tabel 1. Hasil pengujian black box terhadap aplikasi penjualan mug Varisty Mug Souvenir .

## 5 Kesimpulan
Pada  penelitian  ini  mengembangkan  aplikasi  penjualan  mug  berbasis  web  untuk  Varisty  Mug Souvenir  dengan  fitur  membuat  mockup  desain  kustom  mug.  Pengembangan  fitur  mockup  desain menerapkan  distorsi  gambar  menyesuaikan  bentuk  produk  mug.  Penelitian  menggunakan  teknologi ImageMagick untuk  fitur  menghasilkan  mockup  desain  mug  yang  menerapkan  distorsi  gambar. Penelitian ini bertujuan untuk meningkatkan penjualannya serta mempermudah proses transaksi bisnis pada  Varisty  Mug  Souvenir.  Fitur  pembuatan  mockup  desain  mug  bertujuan  untuk  membantu pelanggan  dalam  memberikan  bayangan  dan  membuat  keputusan  desain  yang  akan  dipakai  dalam pesanan. Selain itu, dengan menampilkan hasil mockup juga akan meminimalisir pembuatan sampel berlebihan akibat keraguan pelanggan dalam memutuskan desain yang cocok.
Fitur Skenario Hasil yang di harapkan Hasil Uji Registrasi  Registrasi Muncul pop up message berhasil registrasi dan berhasil login dengan akun yang baru diregistrasi berhasil Login Login dengan akun customer Berhasil login dan masuk ke halaman home dengan menu tambahan my order, my profile, dan logout berhasil Login dengan akun admin Berhasil login dan masuk ke halaman dashboard admin berhasil Login dengan email atau password salah muncul message error akun tidak ditemukan berhasil Catalog klik salah satu produk dari catalog masuk ke halaman product details berhasil My Order klik menu my order menampilkan list order dan invoice details. list sudah muncul sesuai dengan status order berhasil klik button view design muncul pop up page menampilkan foto desain yang diinput saat order berhasil klik button cancel order menampilkan pop up konfimasi. jika iya, maka order yang dicancel akan hilang dari halaman my order. jika tidak, maka order tetap ada. berhasil klik button my sample masuk ke halaman sample dan menampilkan list sample order berhasil My Sample Approved sample muncul pop up konfirmasi. jika sudah diapproved maka status sample akan berubah menjadi approved berhasil Disapproved sample muncul pop form untuk menginput alasan sample ditolak dan saran perbaikan berhasil My Profile klik menu my order masuk ke halaman my profile. Menampilkan data customer dari proses registrasi berhasil klik button edit profile masuk ke halaman edit my profile menampilkan form edit.Selesai save, data my profile akan berubah sesuai hasil edit berhasil Contact Menginput pertanyaan pada form contacts menampilkan pop up message, pesan berhasil dikirim ke Varisty Mug Souvernir. Pesan telah diterima oleh admin berhasil Order product melakukan order dengan jumlah order lebih dari 1 masuk ke halaman checkout dan menampilkan details order berhasil mengisi form checkout dan melanjutkan proses order muncul notifikasi konfimasi dan masuk ke halaman input desain berhasil menginput desain mug untuk melanjutkan proses order menampilkan hasil crop foto desain dan hasil generate mockup desain mug. berhasil menyelesaikan proses order dari input desain masuk ke halaman my order dengan details order yang sudah diinput. berhasil melakukan order tanpa login terlebih dahulu masuk ke halaman login dengan message error harus melakukan login berhasil
e-ISSN:2540-9719

## Referensi
[1] S.  Saepudin,  E.  Pudarwati,  C.  Warman,  S.  Sihabudin,  and  G.  Giri,  “Perancangan  Arsitektur Sistem Pemesanan Tiket Wisata Online Menggunakan Framework Zachman,” Jurnal Sisfokom (Sistem  Informasi  dan  Komputer) ,  vol.  11,  no.  2,  pp.  162–171,  Aug.  2022,  doi: 10.32736/sisfokom.v11i2.1415.
[2] A. A. Mikhaylova, A. S. Mikhaylov, and D. V. Hvaley, “Receptiveness to innovation during the COVID-19 pandemic: asymmetries in the adoption of digital routines,” Reg Stud Reg Sci , vol. 8, no. 1, pp. 311–327, 2021, doi: 10.1080/21681376.2021.1962400.
[3] H.  Ronen,  “COVID-19  and  small  businesses,” Archives  of  Community  Medicine  and  Public Health , pp. 065–065, Apr. 2021, doi: 10.17352/2455-5479.000137.
[4] T.  Jovita  Wibowo,  A.  Aribowo,  and  A.  E.  Widjaja,  “Sistem  Informasi  Penunjang  Proses Pemesanan  dan  Desain  Kue  Pada  Toko  Kue  Artisan  Online  Berbasis  Web,” 48  ULTIMA InfoSys , vol. X, no. 1, 2019.
[5] H.  Jurnal  and  P.  Priyotomo,  “Rancang  Bangun  Sistem  Kustomisasi  Sepeda  Motor  Berbasis Web Menggunakan Metode System Development Life Cycle (Sdlc),” 2021.
[6] N. S. Halid, I. Hussein, and M. Ahmad, Custom and Order Batik Application System (COBS), Multidisciplinary  Applied  Research  and  Innovation ,  vol.  4,  no.  1,  pp.  184–189,  2023,  doi: 10.30880/mari.2023.04.01.034.
[7] Smartmockups, 2023. https://smartmockups.com/ (accessed Mar. 30, 2023).
[8] N.  Montfort, Exploratory  programming  for  the  Arts  and  Humanities ,  Second  Edition. Cambridge, MA: The MIT Press, 2021.
[9] ImageMagick  Studio  LLC.,  ImageMagick,  2023.  https://imagemagick.org  (accessed  Mar. 20, 2023).
[10] 刘志荣 , “ 基于 ImageMagick 技 术的网络虚拟试衣间的设计 ,” 计算机时代 ,  vol.  0,  no.  2, pp. 23–25, 2019.
[11] D.  Naga,  P.  Kumar,  D.  Sathvika,  and  A.  Kumar,  “A  Study  on  SDLC  For  Water  Fall  and Agile,” 2018. [Online]. Available: www.sciencepubco.com/index.php/IJET
[12] I.  Sommerville, Engineering  software  products :  an  introduction  to  modern  software engineering , Harlow, England: Pearson, 2021.
[13] L. Davidson, Pro SQL Server Relational Database Design and Implementation . Apress, 2021. doi: 10.1007/978-1-4842-6497-3.
[14] A.  Sunardi  and  Suharjito,  “MVC  architecture:  A  comparative  study  between  laravel framework  and  slim  framework  in  freelancer  project  monitoring  system  web  based,”  in Procedia Computer Science , Elsevier
B.V., 2019, pp. 134–141. doi:
10.1016/j.procs.2019.08.150.
[15] R.  Bierig,  S.  Brown,  E.  Galván,  J.  T.  Frontmatter,  and  J.  Timoney, Essentials  of  Software Testing . Cambridge University Press, 2021.