## Perancangan dan Pembuatan Aplikasi Website E-commerce untuk Produk Kerajinan Tangan UMKM Nena Namo
Sholiq 1 , Cahya Yunita 2 , Hanim Maria Astuti 3 , Tony Dwi Susanto 4 , Anisah Herdiyanti 5 , Khakim Ghozali 6
1-6 - Institut Teknologi Sepuluh Nopember (ITS) Surabaya
1 sholiq@is.its.ac.id

## ABSTRAK
Usaha Mikro-Kecil dan Menengah (UMKM) Nena Namo adalah UMKM yang berfokus pada produksi kerajinan tangan yang menggunakan karung goni dan kain belacu sebagai bahan dasar untuk membuat produknya. UMKM Nena Namo juga memiliki keunikan lain yang membuat produknya memiliki karakteristik yaitu desain motif yang dilukis secara manual menggunakan tangan. Produk kerajinan yang dipasarkan beragam, seperti tas, dompet, kotak tisu, sapu tangan, sampul makanan, kotak pensil, taplak meja, dan sebagainya. Mekanisme penjualan untuk UMKM Nena Namo saat ini terbatas pada pelanggan memesan melalui SMS, telepon, atau datang langsung ke rumah  produksi  Nena  Namo.  Untuk  memperluas  pasar  dan  memanfaatkan  internet  sebagai  sarana  penjualan produknya,  maka  pada  penelitian  ini  UMKM  Nena  Namo  membuat  aplikasi  website  e-commerce. Mempertimbangkan keunikan atau karakteristik produk kerajinan UMKM ini yang ada  pada desain aksesorisnya, situs web e-commerce akan dilengkapi dengan fitur untuk membuat desain kustomisasi produk oleh pelanggan. Pada penelitian ini telah dihasilkan sebuah aplikasi website e-commerce untuk UMKM Nena Nemo yang telah diuji dengan test case berbasis use case. Kelebihan artikel ini terletak kerunutan perancangan dan pembuatan aplikasi yang dimulai dari wawancara, analisis kebutuhan pengguna, perancangan, pengkodean, dan pengujian yang dapat dirunut tahap per tahap.
Kata Kunci : website, e-commerce, UMKM, kerajinan tangan

## ABSTRACT
Small and Medium Enterprises (SMEs) of Nena Namo was a SMEs that focused to produce handicrafts that used jute sacks and calico cloth as the basic material for making its products. SMEs of Nena Namo also had another uniqueness that made its products had a characteristic that was a motif design that was manually painted using hands. Handicraft products that were marketed were diverse, such as bags, wallets, tissue boxes, handkerchiefs, food covers, pencil boxes, tablecloths and so on. The sales mechanism for SMEs of Nena Namo was currently limited to  customers ordering via SMS, telephone, or coming directly to  the Nena Namo production house.  To expand the market and to use the internet as a means of selling its products, then in this study SMEs Nena Namo made an e-commerce website application.  Considering the uniqueness or characteristics of UMKM handicraft products lying in the design of the accessories,  the websites of e-commerce would be equipped with features to make product design customization by customers. In this study, application of e-commerce website for the SMEs was tested using the test case which based use case. The advantages of this article lied in the orderliness of the design and  construction of applications that begin with interviews, analysis of user needs, design, coding, and testing that can be traced to stages per stage.
Keywords: website, e-commerce, SMEs, handicrafts

## 1. PENDAHULUAN
Usaha  Mikro,  Kecil,  dan  Menengah  Nena Namo  merupakan  UMKM  yang  bergerak  dalam bidang  penjualan  produk  kerajinan  tangan  berupa tas,  dompet,  tudung  saji,  kotak  pensil,  kotak  tisu, hiasan  meja  dan  produk  pesanan  lainnya.  Harga yang  dibandrol  bervariasi  sesuai  dengan  tingkat kerumitan  pembuatan  produk,  yakni  sekitar  Rp. 10.000  sampai  Rp.  250.000.  UMKM  Nena  Namo terletak  di  daerah  Wonorejo  Kedungsari  Surabaya tepatnya  di  Jalan  Kedungsari  nomor  21  C. Mekanisme penjualan yang diterapkan oleh UMKM Nena Namo masih sebatas pembeli datang langsung ke  lokasi  rumah  produksi  atau  menghubungi  dan mengirimkan  pesan  kepada  pemilik  UMKM  Nena
Namo. Persaingan bisnis penjualan kerajinan tangan sekarang  ini  sangat  ketat.  Oleh  karena  itu, dibutuhkan  suatu  media  yang  dapat  meningkatkan penjualan.
Sementara itu, pengguna teknologi informasi semakin hari semakin bertambah, berdasarkan hasil dari  data  Internet  World  Stat  bahwa  populasi pengguna  internet  Indonesia  mencapai  sekitar 143.260.000 orang pada tahun 2018 [1]. Pencapaian angka  tersebut  membuat  Indonesia  menduduki peringkat  ke-5  terbesar  di  dunia  dalam  hal  jumlah pengguna internet [1]. Jika, pada tahun 2018 jumlah pengguna internet Indonesia sudah mencapai sekitar 143,26  juta  orang,  kemungkinan  besar  jumlah  ini akan terus bertambah. Menurut Asosiasi
Penyelenggara  Jasa  Internet  Indonesia  (APJII), secara umum pertumbuhan internet di negeri kita ini selaras  dengan  pertumbuhan  internet  di  dunia  [2]. Penyebab  pengguna  teknologi  informasi  yang semakin  bertambah  diduga  karena  gaya  hidup masyarakat  semakin  familiar  dengan  dunia  maya dengan bertambahnya pengguna media sosial seperti Instagram,  Snapchat,  Line,  Facebook,  Twitter, YouTube, Instagram dan lain sebagainya [3]. Tidak hanya  itu,  semakin  menjamurnya  bisnis  jual  beli online  ataupun e-commerce juga  menyebabkan pengguna  teknologi  informasi  semakin  bertambah [3]. E-commerce merupakan  singkatan  dari electronic  commerce yaitu  pembelian,  penjualan, dan  pemasaran  barang  serta  jasa  melalui  sistem elektronik,  seperti  televisi,  jaringan  komputer ataupun  internet  [4].  Perdagangan  elektronik  ini sudah  masuk  dalam  kategori  industri  teknologi informasi, karena semua jenis usahanaya melibatkan aplikasi dan penerapan sistem TI [5]. Menurut David Baum definisi e-commerce yang sudah distandarkan dan  disepakati  menyatakan  bahwa e-commerce merupakan suatu set dinamis teknologi, aplikasi dan proses  bisnis  yang  menghubungkan  perusahaan, pelanggan, dan komunitas tertentu melalui transaksi elektronik dan perdagangan barang, pelayanan, dan informasi  yang  dilakukan  secara  elektronik  [6]. Sehingga  dapat  disimpulkan  bahwa e-commerce merupakan proses pembelian dan penjualan jasa atau produk  antara  dua  belah  pihak  melalui  jaringan internet.
Sedangkan
Nilai transaksi e- commerce diprediksi  mencapai Rp 144 triliun pada 2018, naik dari Rp 69,8 triliun di 2016 menjadi Rp 25  triliun  di  2014  [7].  Memperhatikan  data-data terakhir  tentang  pertumbuhan e-commerce di Indonesia, maka hal ini adalah peluang bagi pelaku bisnis untuk turut menjadi pemain di bisnis online.
Strategi  untuk  menghadapi  perkembangan teknologi saat ini, UMKM Nena Namo menginginkan website
e-commerce
untuk memasarkan produknya. Harapannya dengan adanaya website e-commerce , UMKM Nena Namo dapat  memiliki  media  promosi  produk,  sehingga dapat  meningkatkan  jangkauan  pemasaran  dan peningkatan  pendapatan.  Manfaat    penerapan e- commerce akan  memberikan  gambaran  tentang bagaimana teknik sistem penjualan yang dibutuhkan untuk menghadapi persaingan di era globalisasi saat ini [8].
Berdasarkan  penjelasan  di  atas,  penulis berupaya  membantu  memecahkan  permasalahan tersebut,  yaitu  dengan  merancang  dan  membuat aplikasi website e-commerce kustomisasi pemesanan  produk handicraft yang  diterapkan  di UMKM Nena Namo Surabaya. Website e-commerce yang  dibuat  selain  memiliki  fitur  yang  sama  pada umumnya website e-commerce ,  yaitu  melayani
pembelian  pelanggan  meliputi  fitur  menampilkan informasi  deskripsi  dan  harga  produk,  fitur memberikan ulasan dan rating , fitur pemesanan dan fitur  konfirmasi  pembayaran,  dan  lain-lain.  Alhasil fitur tambahan pada website e-commerce ini adalah fitur kustomisasi. Fitur kustomisasi adalah fitur yang memungkinkan  pembeli/pelanggan  dapat  membuat desain  produk  sesuai  keinginan  mereka  langsung pada website .  Fasilitas  fitur  kustomisasi  akan ditampilkan  pada  satu  halaman  khusus,  juga disediakan template atau  kanvas  berbagai  macam produk seperti tas, dompet, kotak pensil, kotak tisu, taplak  meja  dan  sebagainya.  Keuntungan  adanya fitur  kustomisasi,  membuat  penjual  akan  lebih mudah  memahami  desain  detail  produk  yang diinginkan oleh pembeli, sehingga kecil kemungkinan  kesalahan  yang  dibuat  oleh  penjual dalam proses pembuatan produk pemesanan.
Implementasi e-commerce untuk  UMKM sudah  pernah  dilakukan  sebelumnya  di  Indonesia, antara lain situs sentra kukm.com, situs Smacda.com,  dan  situs  Indonesianproduct.biz  [9], website produk  UMKM  berbasis  CMS  dan teroptimisasi  dengan  model  link  internal  dan eksternal  [10], e-commerce untuk  produk  kaos  dan souvenir [11], dan lainnya.
Bagaimananapun juga, produk penelitian ini selain  memiliki  fitur-fitur e-commerce pada umumnya, website e-commerce di  penelitian  ini memiliki  perbedaan  dengan  penelitian  sebelumnya yaitu  pada  aspek  kustomisasi  produk  yang  belum tampak di e-commerce sebelumnya. Fitur kustomisasi  produk  memungkinkan  pelanggan melakukan  kustomisasi  produk  yang  diinginkan sebelum  order  dilakukan.  Jadi  dengan  fitur  ini diharapkan  pelanggan  dapat  merancang  sendiri produk yang akan dipesan sesuai dengan keinginannya. Tujuan penelitian ini adalah untuk merancang  dan  membangun website  e-commerce untuk  UMKM  Nena  Nemo  yang  memiliki  fitur kustomisasi  produk  yang  mana  kustomisasi dilakukan  sendiri  oleh  pelanggan.  Kelebihan  paper ini adalah membahas pembuatan aplikasi website e- commerce secara  runtun  dari  analisis  kebutuhan pengguna,  rancangan  dengan Unified  Modeling Language (UML), pengkodean dengan struktur kode yang  diturunkan  dari  diagram  kelas  di  UML,  dan pengujian aplikasi berbasis use case .

## 2. METODOLOGI PENELITIAN
Metode  pembuatan  sistem  perangkat  lunak dilaksanakan dalam tahapan-tahapan, yaitu: analisis kebutuhan,  desain,  pengkodean,  pengujian,  dan implementasi.  Masing-masing  tahapan  dijelaskan secara singkat di bawah ini.

## Tahap Analisis Kebutuhan
Tahapan  analisis  merupakan  tahapan  yang dilalui  oleh  penulis  untuk  membuat website e- commerce kustomisasi pemesanan produk handicraft UMKM Nena Namo, setelah mencari dan  mempelajari  literatur  terkait  penelitian.  Tahap analisis dilakukan dengan aktivitas antara lain:
- Melakukan wawancara
Wawancara  dilakukan  kepada  pemilik  UMKM Nena  Namo  dengan  teknik  semi  terstruktur. Tujuan  wawancara  adalah  untuk  mendapatkan kebutuhan  aplikasi  perangkat  lunak  yang diperlukan oleh UMKM Nena Namo.
- Analisis hasil wawancara Pada  tahapan  ini,  penulis  melakukan  translasi wawancara ke dalam cerita pengguna, membuat daftar  kebutuhan  sistem  berdasarkan  hasil translasi  wawancara  ke  dalam  cerita  pengguna, membuat  daftar  kebutuhan  fungsional  sistem, dan mendeskripsikan sistem yang akan dibuat.
- Membuat Deskripsi Pengguna Tujuan  tahap  ini  adalah  mengetahui  siapa  saja pengguna  yang  terlibat  untuk  lebih  memahami peran apa saja yang dapat dikerjakan oleh setiap pengguna. Hal dimaksudkan untuk
memudahkan  memetakan  setiap  aktivitas  dan memudahkan untuk membuat diagram use case.
- Menurunkan Diagram Use Case Diagram use case merupakan pemodelan untuk menggambarkan  kelakuan  ( behavior )  sistem yang akan dibuat. Setiap use case mendeskripsikan  sebuah  interaksi  antara  satu atau lebih aktor dengan sistem yang akan dibuat. Diagram use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang berhak menggunakan fungsi- fungsi tersebut.
- Membuat Deskripsi Use Case Deskripsi use  case menjelaskan  bagaimana skenario sistem berjalan dari masing-masing use case yang telah dirancang.
- Memperbandingkan  alur  proses  bisnis  sebelum dan sesudah menggunakan aplikasi Bagian ini untuk mengetahui perbandingan alur proses bisnis yang lama atau yang masih belum menggunakan sistem dan alur proses bisnis yang baru yang sudah menggunakan sistem.

## Tahap Desain
Tahap  desain  digunakan  untuk  mengubah kebutuhan-kebutuhan  yang  sudah  dijabarkan  pada tahap analisis menjadi representasi ke dalam bentuk “ blueprint ”  sistem  yakni  diagram sequence , diagram  kelas,  desain  basis  data,  dan  desain antarmuka. Desain harus dapat mengimplementasikan kebutuhan yang telah disebutkan pada tahap sebelumnya.

## Tahap Pengkodean
Pengkodean  digunakan  untuk  mentransfer rancangan  dalam  bentuk  diagram  kelas  ke  kode bahasa pemrograman dengan paradigma berorientasi obyek. Bahasa pemrograman yang digunakan adalah Hypertext  Prepocessor  (PHP).  Pembuatan  kode sumber  atau script dilakukan  pada  tiga  komponen utama  yakni  Model, View dan Controller ketiga komponen  tersebut  dikenal  dengan  sebutan  MVC. Pembuatan  kode  atau script pada view untuk tampilan  pengguna.  Kemudian controller untuk penghubung  antara view dan  model.  Model digunakan  untuk  memanggil  data  dari  basis  data yang berisi query .

## Tahap Pengujian
Tahapan  ini  digunakan  untuk  menemukan eror  pada  sistem  yang  telah  dibuat.  Pengujian dilakukan  dengan  cara  menguji  setiap  fitur–fitur pada website e-commerce UMKM  Nena  Namo. Pengujian fitur menggunakan test case berbasis use case .

## 3. HASIL DAN PEMBAHASAN

## Hasil Analisis Kebutuhan Pengguna
Pada tahapan ini, penulis melakukan translasi hasil  wawancara  ke  dalam  cerita  pengguna, membuat daftar kebutuhan sistem berdasarkan hasil translasi  wawancara  ke  dalam  cerita  pengguna, membuat  daftar  kebutuhan  fungsional  sistem,  dan mendeskripsikan sistem yang akan dibuat.  Tabel 1 menunjukkan  hasil  translasi  hasil  wawancara pengguna ke dalam bentuk cerita pengguna. Tampak bahwa kolom 3 menunjukkan hasil kesimpulan dari cerita pengguna ke dalam kebutuhan pengguna.
Tabel 1. Translasi Kebutuhan ke Dalam Bentuk Cerita Pengguna
Kode Cerita Pengguna Kebutuhan US-01-01   Sistem mudah diakses dimanapun Deskripsi cerita:: Sistem yang akan dibuat harus mudah diakses oleh pengguna dimanapun dan kapanpun. 1) Sistem berbasis web
US-01-02   Pengguna dapat mendesain produk langsung pada website Deskripsi cerita:: Sistem dilengkapi dengan satu halaman khusus yang akan digunakan pelanggan untuk membuat desain  produk  yang  diiginkan  langsung  pada website .  Tujuan  adanya  halaman  khusus  untuk mendesain  produk  adalah  penjual  dapat  lebih  memahami  detail  gambar  atau  desain  yang diinginkannya.
2) Fitur Buat Desain
Kode Cerita Pengguna Kebutuhan US-01-03   Sistem berbasis web atau e-commerce kustomisasi hanya bisa digunakan oleh pengguna tertentu Deskripsi cerita:: Sistem e-commerce untuk fitur desain hanya bisa digunakan oleh pengguna yang telah daftar dan melakukan login . Kemudian untuk halaman admin, hanya admin yang dapat mengakses halaman tersebut. 3) Fitur Sign in/Sign up 4) Fitur untuk pelanggan yaitu berupa front end 5) Fitur untuk admin US-01-04   Sistem menyediakan informasi produk Deskripsi cerita: Sistem ini akan dilengkapi dengan halaman untuk menampilkan informasi produk-produk UMKM. 6) Fitur Produk US-01-05   Sistem menyediakan informasi tentang UMKM Nena Namo Deskripsi cerita Sistem akan memiliki halaman untuk memberikan informasi seputar UMKM Nena Namo baik dari profil UMKM dan personil di UMKM Nena Namo. 7) Fitur Tentang Kami US-01-06   Sistem menyediakan informasi mengenai produk baru
Deskripsi cerita: Sistem akan memiliki halaman untuk memberikan informasi produk baru UMKM Nena Namo.
8) Fitur Beranda US-01-07   Sistem menyediakan fitur bagi pengguna yang ingin menyimpan produk tanpa harus membeli Deskripsi cerita: Sistem  akan  memiliki  halaman  untuk  menyimpan  produk  yang  disenangi  oleh  pelanggan. Produk  yang  disimpan  oleh  pelanggan  nantinya  dapat  dihapus  atau  dilanjutkan  ke  proses pembelian. 9) Fitur Checkout US-01-08   Sistem menyediakan fitur untuk memberikan detail produk Deskripsi cerita: Sistem  akan  memiliki  halaman  untuk  memberikan  informasi,  deskripsi,  spesifikasi  produk maupun ulasan yang berupa komentar dan rating. 10) Fitur Detail US-01-09   Sistem menyediakan fitur untuk memberikan informasi status dari pemesanan ataupun pembayaran
Deskripsi cerita:
Sistem  akan  memiliki  halaman  untuk  memberikan  informasi  status  pemesanan  yang  belum dibayar  dan  pesanan  yang  sudah  dibayar  sampai  status  yang  sudah  melebihi  batas  waktu pembayaran  yang  telah  ditentukan.  Pada  halaman  ini  juga  disediakan  informasi  nomor  resi, untuk melacak pengiriman produk ke alamat pelanggan .
11) Fitur Belanjaanku
US-01-10   Sistem menyediakan fitur untuk pelanggan yang ingin mengkonfirmasi pembayaran setelah transfer Deskripsi cerita: Sistem akan memiliki halaman yang berisi formulir konfirmasi pembayaran, dengan data yang harus  diisi  adalah  nomor  rekening,  nama,  dan  nominal  transfer.  Tujuannya  memudahkan pengelola  UMKM  Nena  Namo  untuk  mengecek  uang  yang  masuk  dalam  rekening  pemilik UMKM Nena Namo. 12) Fitur Konfirmasi Pembayaran US-01-11   Sistem memiliki halaman khusus untuk admin dalam memasukkan data produk kedalam website Deskripsi cerita: Sistem memiliki halaman khusus untuk admin untuk memasukkan produk baru dan menghapus produk. 13) Fitur View All Data Product 14) Fitur Add New Data Product 15) Fitur Edit Data 16) Product
US-01-12   Sistem memiliki halaman khusus untuk admin dalam melihat invoice yang masuk Deskripsi cerita:
Sistem memiliki halaman khusus untuk admin untuk melihat semua invoice yang masuk, detail produk  yang  dibeli  oleh  pelanggan,  detail  status  pembayaran,  dan  nomor  resi  pengiriman produk. 17) Fitur View All Invoices 18) Fitur Detail Invoices 19) Fitur Detail Status
20) Fitur Input Resi
US-01-13   Sistem memiliki halaman khusus untuk admin dalam melihat data total penjualan bulanan
Deskripsi cerita: Sistem memiliki halaman khusus untuk admin untuk melihat semua rekapitulasi penjualan bulanan produk UMKM Nena Namo dalam bentuk grafik yang mana bentuk grafik akan lebih memudahkan untuk melihat data. 21) Fitur Rekapitulsi Penjualan
Daftar  kebutuhan  sistem  dibuat  berdasarkan hasil  analisis  terhadap  cerita  pengguna.  Tabel  2 menampilkan daftar kebutuhan yang ada pada sistem e-commerce yang didapatkan dari proses
sebelumnya  dengan  cara  mengekstrak  daftar kebutuhan di Tabel 1 menjadi fitur-fitur.
Tabel 2. Daftar Kebutuhan Sistem
E-Commerce UMKM Nena Namo Kode Nama Fitur Penjelasan KF-01 Fitur Beranda Pada fitur halaman utama terdapat banner, informasi produk baru, dan informasi produk dari beberapa sub-kategori. KF-02 Fitur Produk Pada fitur produk memiliki menu dropdown untuk memilih kategori dan sub-kategori produk. KF-03 Fitur Buat Desain Fitur ini merupakan fitur yang menyediakan template untuk mendesain produk sesuai keinginan pelanggan KF-04 Fitur Tentang Kami Fitur ini memberikan informasi seputar profil atau sejarah berdirinya UMKM Nena Namo dan personil yang tergabung dalam UMKM Nena Namo kepada pengunjung website KF-05 Fitur Checkout Fitur checkout merupakan fitur untuk keranjang belanja, tujuannya adalah untuk menyimpan produk yang diginkan tanpa haru membeli, namum pelanggan juga dapat menghapus produk dari keranjang belanja dan dapat melakukan pembelian dengan hanya menekan button PAY. KF-06 Fitur Detail Fitur detail merupakan fitur yang berisi informasi produk, deskripsi produk, spesifikasi produk maupun ulasan yang berupa komentar dan rating . KF-07 Fitur Belanjaanku Fitur belanjaanku merupakan fitur yang berisi informasi status dari pemesanan yang belum dibayar, pesanan yang sudah dibayar, dan status pesanan yang sudah due date . Pada
halaman ini juga disediakan informasi nomor resi, untuk melacak pengiriman produk ke alamat pelanggan. KF-08 Fitur Konfirmasi Pembayaran Fitur konfirmasi pembayaran merupakan fitur yang berisi formulir konfirmasi pembayaran dengan data yang harus diisi meliputi: nomor rekening, nama, dan nominal transfer. Tujuannya untuk memudahkan pengelola UMKM Nena Namo dalam mengecek uang yang masuk ke rekening pemilik UMKM Nena Namo KF-09 Fitur Sign in Fitur Sign in digunakan untuk pelanggan yang ingin melakukan pembelian produk dan desain produk. Tentunya pengguna yang dapat log in adalah pengguna yang teregistrasi.
KF-10
Fitur Sign up Fitur sign in digunakan untuk pelanggan yang ingin membuat akun sebelum menggunakan
website e-commerce . KF-11 Fitur admin View All Data Product Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat produk- produk yang sudah dimasukkan ke website . KF-12 Fitur admin Add New Data Product Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat menambah produk baru dengan memasukkan nama produk, harga, kategori dan subkategori, deskripsi produk, gambar produk, dan tanggal pemasukan. KF-13 Fitur admin Edit Data Product Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat mengubah semua data yang berhubungan dengan produk yang telah disimpan sebelumnya. KF-14 Fitur admin View All Invoices Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat semua invoice yang masuk dengan status sudah terbayar atau belum. KF-15 Fitur admin Detail Invoice Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat detail invoice produk-produk yang dipesan oleh pelanggan. KF-16
Fitur admin Detail Status Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat detail status dan status konfirmasi pembayaran. Jika pelanggan telah melakukan konfirmasi pembayaran, maka status yang semula unpaid (belum membayar) menjadi paid (sudah membayar). KF-17 Fitur admin input Resi Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat memasukkan atau memberi nomor resi kepada pemesanan yang sudah dikirim kepada pelanggan. KF-18 Fitur admin Rekapitulasi Penjualan Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat rekapitulasi penjualan bulanan produk UMKM Nena Namo dalam bentuk grafik.
Akhirnya,  daftar  kebutuhan  pengguna  yang disarikan dari Tabel 2 ditampilkan di Tabel 3 yang sudah  dikelompokan  ke  masing-masing  pengguna, yaitu pelanggan, pelanggan dan admin, dan admin.

## Tabel 3. Daftar Kebutuhan Fungsional Sistem
Pengguna Daftar Kebutuhan Fungsional Pelanggan Beranda,  produk,  Buat  Desain,  Tentang Kami,  Checkout,  Detail,  Belanjaku,  dan Konfirmasi Pembayaran Pengguna Daftar Kebutuhan Fungsional Pelanggan dan Admin Sign in, sign up, dan Register Admin View  All  Data  Product,  Add  New  Product, Edit  Product,  View  All  Invoices,  Detail Invoice,  Detail  Status,  Input  Resi,  dan Rekapitulasi Penjualan

## Diagram Use Case Sistem
Use  case  diagram atau  diagram use  case merupakan  pemodelan  untuk  menggambarkan fungsionalitas yang disediakan oleh sistem [5]. Use case mendeskripsikan  sebuah  interaksi  antara  satu atau  lebih  aktor  dengan  sistem  perangkat  lunak. Dengan  pengertian  yang  cepat,  diagram use  case digunakan  untuk  mengetahui  fungsi  apa  saja  yang ada  di  dalam  sebuah  sistem  dan  siapa  saja  yang berhak menggunakan fungsi-fungsi tersebut.
Secara  garis  besar,  pada  sistem  ini  ada  dua bagian  sistem  yaitu:  bagian  depan  ( front-end )  dan bagian belakang ( back-end ). Bagian depan merupakan  bagian  yang  ditujukan  untuk  aktor Pelanggan, sedangkan
bagian belakang diperuntukan  aktor  Administrator.  Gambar  1. Diagram Use  Case Untuk E-Commerce Produk Kerajinan Tangan UMKM Nena Namo menunjukkan  dua  aktor  yaitu  Pelanggan  dan Administrator,  sedangkan  aktor User adalah  aktor generalisasi  dari  aktor  Pelanggan  dan  aktor Administrator  untuk  menjalankan use  case generik yang  mana  use  case  tipe  ini  dapat  dilakukan  oleh aktor  Pelanggan  atau  aktor  Administrator  yaitu Register, Logout , dan Login .
Tabel 4. Daftar Aktor dan Use Case Sistem Aktor Use Case Pelanggan Display home, Search product, Display myshopping, Display details of shopping Aktor Use Case
status, Confirm payment, Create order, Display product in cart, Display product,
Display a detail product, Add product to cart, Create design a product, Add comment and rate to product User Login, Logout , dan Registe r
Administrator Add a new product, Update a product, Delete a product, Change order status, Display order, Display a detailed order, Add shipping number, Display sales recapitulation
Beberapa  fungsi  yang  bisa  dilakukan  aktor User , Pelanggan, dan Administrator terhadap sistem perangkat lunak disajikan di Tabel 4. Yang menarik di  sistem  perangkat  lunak  ini  adalah  use  case ‘Create a product design’ yang mana dengan fungsi ini  seorang  pelanggan  dapat  mendesain  produk yang  akan  dipesan  menggunakan  aplikasi  e- commerce ini.

## Deskripsi Use Case
Deskripsi  use  case  ( Use  Case  Description ) berisikan  tentang  prilaku  yang  ada  pada use  case . Deskripsi use case menjelaskan bagaimana skenario sebuah  fungsi  berjalan  dari  sebuah use  case yang telah dirancang. Tabel 5 menunjukkan deskripsi use case untuk use  case ‘ Create  a  product  design ’, karena  terbatasan  tempat,  pada  paper  ini  penulis hanya menampilkan satu deskripsi use case saja.
Gambar 1. Diagram Use Case Untuk E-Commerce Produk Kerajinan Tangan UMKM Nena Namo
Tabel 5. Deskripsi Use Case ‘ Create A Product Design ’ Nama Use case Create a product design atau membuat sebuah desain produk Aktor Pelanggan Deskripsi Use case ini mendeskripsikan pelanggan ingin membuat desain produk sesuai keinginannya masing-masing. Precondition Pelanggan telah berada di semua halaman, kecuali halaman checkout dan halaman belanjaanku. Pemicu - Urutan Kejadian No Aktor Sistem 1. Pelanggan menekan menu desain. Sistem menampilkan halaman pilhan kanvas yang akan digunakan sebagai dasar membuat desain produk. 2. Pelanggan memilih dan menekan nama kanvas. Sistem menampilkan halaman membuat desain. 3 Pelanggan memilih gambar dasar Sistem menampilkan gambar yang telah dipilih. 4. Pelanggan memilih komponen gambar dengan cara drag and drop ke dalam kanvas sebagai template . Sistem menampilkan kanvas dengan hasil komponen yang telah diletakkan pada kanvas tersebut. 5. Memilih selesai. Sistem menyimpan hasil membuat desain produk pelanggan. Langkah alternatif - Kesimpulan Use case berhasil jika kanvas telah terisi dengan komponen yang dimasukkan oleh pelanggan. Kondisi Setelah Pelanggan dapat menambahkan produk ke dalam keranjang. Aturan Proses Pelanggan berada pada halaman membuat desain dan telah memilih kanvas yang akan digunakan mendesain produk. Asumsi Pelanggan ingin mendesain produk sesuai keinginannya dan melakukan pemesanan produk hasil desain
Proses  Bisnis  di  UMKM  Nena  Namo  Sebelum dan Setelah ada Aplikasi
Proses  bisnis  sebelum  adanya website e- commerce dan  rencana  sesudah  implementasi website
e-commerce diidentifikasi
untuk menunjukkan perubahan yang terjadi. Gambar 2  menunjukkan  proses  bisnis penangganan order di UMKM Nena Nemo sebelum menggunakan aplikasi website e-commerce , sedangkan gambar 3 menunjukkan proses penanganan order dengan  menggunakan  aplikasi website e-commerce .
Gambar 2. Alur Proses Penanganan Pemesanan di UMKM Nena Namo yang Belum Menggunakan Aplikasi Perangkat Lunak
Gambar 3. Alur Proses Penanganan Pemesanan di Umkm Nena Namo Menggunakan Aplikasi Perangkat Lunak

## Diagram Sequence
Desain diagram sequence dibuat berdasarkan dari  desain  diagram use  case dan  deskripsi  dari masing-masing use  case yang  ada  pada  aplikasi. Gambar  4  adalah  diagram sequence ‘ Create  a product design ’.
Diagram Kelas Diagram
kelas digunakan
untuk menampilkan  kelas–kelas  di  dalam  sistem  dan hubungan relasi yang memberikan gambaran sistem secara statis. Gambar 5 menunjukkan diagram kelas pada sistem ini.
Gambar 4. Diagram Sequence ‘ Create a Product Design ’
Gambar 5. Diagram Kelas Sistem E-Commerce UMKM Nena Namo

## Basis Data Aplikasi Website E-commerce UMKM Nena Nemo
Basis  data  dibuat  berdasarkan  desain  model data fisik. Desain data model fisik yang sudah dibuat
dibangkitkan  ke  bentuk  basis  data  spesifik. Teknologi  basis  data  yang  digunakan  adalah  basis data MySQL.  Gambar 6 menampilkan desain basis data sistem e-commerce UMKM Nena Nemo.
Gambar 6. Desain Basis Data Sistem E-commerce UMKM Nena Namo
Pengkodeaan  Aplikasi  Website  E-commerce UMKM Nena Nemo
Proses pengkodean dilakukan setelah rancangan diselesaikan. Bahasa pemrograman yang digunakan  adalah Hypertext  Prepocessor (PHP). Pembuatan kode sumber atau script dilakukan pada tiga  komponen  utama  yakni Model,  View ,  dan
Controller yang  biasa  dikenal  dengan  sebutan  pola MVC.
Untuk  memudahkan  penyajian  kode  sumber ( source  code )  untuk website e-commerce UMKM Nena  Namo,  diperlukan  diagram sequence yang telah  dibuat  sebelumnya  sebagai  panduan  untuk memudahkan  penyajian View,  Controller, dan Model . Diagram sequen yang dibuat panduan adalah
“ Display Produk UMKM Nena Namo ” (Gambar 7).
Gambar 7. Diagram Sequence “ Display produk ” sebagai Panduan untuk Pengkodean Aplikasi
Dari  diagram sequence di  Gambar  7  yang diberi  judul  “ Display  produk ”,  kita  mendapatkan empat  obyek  yaitu  Homepage,  Controlweb, Mymodel,  dan  Productpage.  Pada  pengkodean  ini, penulis menggunakan format  MVC, maka keempat obyek  tersebut  dipetakan  ke  dalam  model  ( entity ), view ( boundary) ,  atau controller .  Untuk  perangkat lunak berbasis web, obyek-obyek kontrol dan model pada diagram sequence dapat menjadi kelas di kode
sumber  menggunakan  bahasa  pemrograman  PHP, sedangkan  obyek-obyek boundary atau view menjadi  file  bertipe  html  yang  dijadikan  sebagai GUI terhadap aktor pengguna. Hasil pengkategorian ini  disajikan  di  Tabel  6 yan g  mana  tabel  ini menampilkan  tipe  komponen  yang  dapat  berupa kelas  atau  halaman  html  dari  tipe  model, view dan controller yang  diekstrak  dari  diagram  sequen “Display  produk”  (Gambar  7).  Pada  tabel  ini  juga
disajikan beberapa metode dalam sebuah kelas yang diekstrak  dari  diagram sequence di  Gambar  7 tersebut.
Tabel 6 . Tipe Komponen MVC dapat Berupa Kelas atau Halaman Html yang Diekstrak dari Diagram Sequence “ Display Product ” Tipe Komponen MVC Nama Komponen Tipe Nama metode dalam kelas Model Mymodel Kelas getProduct dan getSubproduct Controller Controlweb Kelas findFunctionPro duct View ProductPage dan Homepage Halaman html - Pada kesempatan ini, penulis tidak menampilkan  kode  sumber  secara  utuh  karena keterbatasan tempat penyajian. Penulis menampilkan metode findProduct di kelas Controlweb, getProduct dan getSubProduct di kelas Controlweb. Kode sumber untuk metode findProduct disajikan di Gambar 7. Tampak bahwa kelas  ini  memanggil  metode  getProduct  dan getSubproduct  di  kelas  Mymodel,  juga  memanggil view ProductPage (lihat kembali Gambar 7).
Gambar 8. Kode Sumber untuk Metode Findproduct di Kelas Controlweb Dimana Metode Ini Berisi Pemangilan Metode Getsubproduct dan Getproduct di Kelas Mymodel Dan Pemanggilan View Productpage
Gambar 9. Kode Sumber untuk Metode Getproduct di Kelas Mymodel untuk Mendapatkan Produk-Produk Berdasarkan
Kategori Tertentu
Gambar 10. Kode Sumber untuk Metode Getsubproduct di Kelas Mymodel untuk Mendapatkan Produk-Produk Berdasarkan Subkategori
Sedangkan kode sumber getProduct diberikan di  Gambar  9  dan  getSubproduct  di  Gambar  10. Kedua  metode  tersebut  berisi query terhadap  tabel Products  berdasarkan  kategori  tertentu  atau berdasarkan subkategori dari sebuah produk UMKM Nena Namo.
Selanjutnya,  hasil query dari  kedua  metode tadi  berupa  nilai  produk-produk  UMKM  yang
disimpan  dalam  bentuk  larik.  Hasil query ini  oleh metode findProduct diberikan ke halaman ProductPage  sebagai view untuk  menampilkan produk
hasil query .
Penggalan script
ProductPage.php  yang  berisi script  html untuk menampilkan produk diberikan di Gambar 11.
Gambar 11 . Penggalan Kode Sumber dari ProductPage.Php untuk Menampilkan Informasi Tentang Produk UMKM

## Aplikasi  Website  E-commerce  UMKM  Nena Namo
Setelah  menyelesaikan  pengkodean  untuk semua  fitur-fitur  yang  sudah  dirancang,  maka dihasilkan  sebuah  aplikasi e-commerce untuk
UMKM  Nena  Namo.  Gambar  12-14  menampilkan beberapa  contoh  halaman  pada  sistem e-commerce UMKM  Nena  Namo.  Gambar  13  dan  Gambar  14 adalah  halaman  yang  digunakan  oleh  pelanggan untuk mendesain produk yang akan dipesan.
Gambar 12. Halaman Produk yang Menampilkan Produk-Produk UMKM
Gambar 13. Halaman Memilih Kanvas untuk Mendesain Produk Kustom oleh Pelanggan
Gambar 14. Halaman untuk Mendesain Produk Kustom oleh Pelanggan

## Pengujian Aplikasi Website E-commerce UMKM Nena Namo
Pengujian  dilakukan  setelah  pengkodean selesai yang mana pengujian dilakukan berdasarkan kebutuhan fungsional dan kebutuhan non- fungsional.  Pada penelitian ini, penulis fokus pada pengujian kebutuhan fungsional. Pengujian kebutuhan fungsional dilakukan dengan menggunakan  pengujian use  case .  Pengujian menggunakan metode ini dilakukan dengan menguji skenario utama dan skenario alternatif pada masing-
masing use  case .  Pada  bagian  ini,  penulis  tidak menampilkan  pengujian  terhadap  semua use  case . Sebagai ilustrasi, penulis akan menyajikan pengujian  untuk use  case  “Create  a  product design”, sementara untuk pengujian use case lainnya menggunakan prosedur serupa.
Tabel 7. Pengujian untuk U se Case “ Create a Product Design ”
No Aksi aktor Espektasi Hasil Simpulan 1 Pelanggan menekan menu buat desain. Sistem menampilkan halaman option product atau pilihan kanvas untuk desain produk. Sistem berhasil menampilkan halaman option product atau pilihan kanvas untuk desain produk. Berhasil dan sesuai dengan espektasi. 2 Pelanggan menekan nama kanvas. Sistem menampilkan halaman create design yang berisi komponen berupa gambar dan tulisan.  Sistem menampilkan kanvas atau template sesuai dengan kanvas yang telah dipilih sebelumnya. Sistem berhasil menampilkan halaman create design yang berisi
komponen berupa gambar dan tulisan.  Sistem berhasil menampilkan kanvas atau template sesuai dengan kanvas yang telah dipilih sebelumnya. Berhasil dan sesuai dengan espektasi. 3 Pelanggan mengunggah gambar. Sistem menampilkan gambar yang telah diunggah Sistem menampilkan gambar yang telah diunggah Berhasil dan sesuai dengan espektasi 4 Pelanggan menarik dan melepaskan komponen pada kanvas. Sistem menampilkan kanvas yang telah terisi dengan komponen . Sistem berhasil menampilkan kanvas yang telah terisi dengan komponen. Berhasil dan sesuai dengan espektasi.
Hasil website e-commerce untuk halaman membuat desain produk Setelah pelanggan menekan menu buat desain, maka sistem akan menampilkan pilihan kanvas atau template yang digunakan untuk dasar membuat desain seperti gambar di bawah ini.
Maka sistem akan menampilkan halaman desain sesuai dengan kanvas atau template yang telah dipilih. Komponen untuk mendesain produk terdiri dari teks dan gambar. Pelanggan dapat mengunggah gambar, sehingga dapat mendesain sesuai dengan keinginannya.
Untuk mendeain produk lakukan cara drag and drop gambar ke dalam kanvas

## 4. KESIMPULAN DAN SARAN
Perancangan  dan  pembuatan website e- commerce produk handicraft UMKM  Nena  Namo memerlukan  beberapa  tahapan  aktivitas.  Tahapan pertama  adalah  tahap  analisis  kebutuhan,  pada tahapan  ini  dilakukan  dilakukan  penggalian  data kepada  narasumber  yaitu  pemilik  UMKM  Nena Namo  dengan  teknik  wawancara,  hasil  wawancara kemudian  dianalisis  untuk  mendapatkan  cerita pengguna,  daftar  kebutuhan  fungsional  sistem,  dan deskripsi sistem dan pengguna. Analisis  kebutuhan diakhiri dengan didapatkannya diagram use case dan deskripsinya.  Pada  aplikasi website e-commerce UMKM Nena Namo ini terdapat dua aktor pengguna yaitu pelanggan dan administror yang terdiri dari 23 use case .
Tahap  kedua  yaitu  tahap  desain  yang digunakan  untuk  mengubah  kebutuhan-kebutuhan yang  sudah  dijabarkan  pada  tahap  analisis  menjadi representasi  ke  dalam  bentuk  “ blueprint ”  sistem yakni diagram sequence , diagram kelas, dan desain basis data. Tahap ketiga adalah pengkodean aplikasi website e-commerce yang  mentransfer  rancangan dalam bentuk diagram kelas  ke dalam kode bahasa pemrograman dengan paradigma berorientasi obyek. Pengkodean menggunakan skema model, view, dan controller atau  dikenal  dengan  skema  MVC.
Sedangkan tahap terakhir adalah pengujian aplikasi website e-commerce yang  sudah  dihasilkan  dengan menggunakan  pengujian  berbasis use  case .  Setelah mengerjakan tahapan diatas, dihasilkan suatu sistem berbasis website e-commerce kustomisasi  produk handicraft UMKM Nena Namo.
Di  antara  fitur-fitur  yang  dimiliki  aplikasi website e-commerce ini, yang paling menarik adalah fitur mendesain kustomisasi produk handicraft yang bisa dilakukan sendiri oleh pelanggan menggunakan
aplikasi  ini.  Desain  yang  bisa  dilakukan  oleh pelanggan menggunakan template dasar yang sudah disediakan oleh aplikasi, kemudian pelanggan dapat memilih beberapa alternatif aksesoris yang disediakan aplikasi dalam bentuk teks atau gambar.
Keterbatasan  utama  penelitian  ini  terletak pada  ruang  lingkup  penelitian  sampai  pada perancangan  dan  pembuatan website  e-commerce untuk  UMKM  Nena  Namo  tidak  membahas  aspek implementasi, pemantauan dan evaluasi, penerimaan pengguna,  pengukuran  kinerja,  analisis  hasil implementasi,  dan  aspek  pasca  pembuatan  aplikasi lainnya. Oleh sebab itu, penulis menyarankan untuk melakukan  penelitian  lanjutan  dengan  aspek-aspek yang  disebutkan  di  atas  disamping  melanjutkan pengembangan aplikasi website e-commerce dengan fitur-fitur layanan baru untuk meningkatkan kualitas aplikasi.
Kami  mengucapkan  terima  kasih  kepada Lembaga  Penelitian  dan  Pengabdian  Masyarakat (LPPM) Institut Teknologi Sepuluh Nopember (ITS) Surabaya atas dukungan pendanaan kepada kegiatan pengabdian masyarakat ini.

## 5. REFERENSI
[1] I.  W.  Stat,  “Top  20  Countries  with  The  Highest Number of Internet Users,” 2017.
[2] APJII,  “Penggunaan  Internet  Sektor  Bisnis,” Jakarta, 2013.
[3] M.  Mulawarman  and  A.  D.  Nurfitri,  “Perilaku Pengguna  Media  Sosial  beserta  Implikasinya Ditinjau dari Perspektif Psikologi Sosial Terapan,” Buletin Psikologi , vol. 25, no. 1, p. 36, Oct. 2017.
[4] S.  .  Mourya  and  S.  Gupta, E-commerce .  Alpha
Science International Limited, 2015.
[5] J.  Wong, Internet  Marketing  For  Beginners . Jakarta: Elex Media Komputindo, 2013.
[6] K.-P.  Mehdi, Encyclopedia  of  E-Commerce,  E- Government,  and  Mobile  Commerce .  IGI  Global,
2006.
[7] M.  S.  Abdurrahman,  “2018,  Transaksi  e- Commerce Indonesia Akan Capai Rp 144 Triliun,” liputan6.com , Bandung.
[8] M. Suyanto, Strategi periklanan pada e-commerce perusahaan top dunia . Yogyakarta: ANDI, 2003.
[9] J. Jauhari, “Upaya Pengembangan Usaha Kecil dan Menengah  (UKM)  Dengan  Memanfaatkan  E- Commerce,” Jurnal Sistem Informasi , vol. 2, no. 1, p. 10, 2010.
[10]  D.  A.  Diartono,  Y.  Suhari,  and  A.  Supriyanto, “Pengembangan  Model  Cyber  Cluster  E- Commerce  Berbasis  CMS  dan  SEO  Produk UMKM,” IJCCS (Indonesian Journal of Computing and Cybernetics Systems) , vol. 9, no. 2,
p. 145, Jul. 2015.
[11]  S. Adhy, “Implementasi E-Commerce B2C Bahasa Jawa untuk UMKM  Jolali  KaoSemarang,” Jurnal Masyarakat Informatika , vol. 6, no. 12, Oct. 2015.
[12]  Sholiq, Analisis  dan  Perancangan  Berorientasi Obyek . Bandung: Mutiara Indah, 2010.