## PEMBUATAN WEBSITE E-COMMERCE MENGGUNAKAN PENDEKATAN INTERACTION FLOW MODELING LANGUAGE DAN BUSINESS MODEL CANVAS

## PADA TOKO ISTANA MAHAR
Deby Yoga Priatama 1) , Samsinar 2)
Sistem Informasi, Fakultas Teknologi Informasi, Universitas Budi Luhur Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260
E-mail: yogapriatama738@gmail.com 1) , samsinar@budiluhur.ac.id 2)

## Abstrak
Pada zaman digital  seperti ini, segala aspek kehidupan  manusia  kini tidak ada yang lepas dari  perkembangan teknologi  termasuk  juga  E-Commerce.  pada  Toko  Istana  Mahar  sendiri  masih  sangat  sulit  untuk memasarkan model produk lama, menumpuknya  data nota transaksi sehingga perlu banyak waktu untuk mencari data yang diinginkan, sering terjadi hilangnya bukti pembayaran yang dikirimkan pelanggan dan sering terjadi kesalahan pada saat pencatatan laporan dikarenakan pencatatan sendiri dilakukan pada pembukuan sehingga tidak akurat. Untuk  mengatasi  permasalahan  tersebut  maka  dirancanglah  sebuah  website  e-commerce  menggunakan framework  Code  Igniter  serta  MySQL  untuk  database.  Business  Model  Canvas  yang  digunakan  untuk menjabarkan aktifitas dari sebuah bisnis, serta adanya IFML ( Interaction Flow Modeling Language ) yang dapat memudahkan  untuk  mengekspresikan  sebuah  konten  ataupun  interaksi  antar  muka  dengan  pengguna  yang memudahkan  untuk  merancang  website  ini.  Adapun  pendekatan  yang  dilakukan  ialah  dengan  observasi,  studi literatur,  mewawancarai  serta  menganalisa  dokumen  yang  ada.  Hasil  dari  penelitian  ini  ialah  menghasilkan website e-commerce yang mempermudah pelanggan untuk melihat semua produk yang ditawarkan, serta dapat merekam  semua  transaksi  dari  setiap  pelanggan,  dan  mempermudah  pelanggan  untuk  mengirimkan  bukti pembayaran .
Kata kunci: E-Commerce , Business Model Canvas , Interaction Flow Modeling Language, Code Igniter, Mahar Pernikahan.

## 1. PENDAHULUAN
Mahar merupakan kewajiban didalam pernikahan,  dimana  banyak  sekali  orang  yang memerlukan  mahar  untuk  acara  pernikahannya  dan masih jarang sekali ada bisnis yang bergerak dibidang penjualan mahar pernikahan ini, oleh karena itu toko Istana  Mahar  merupakan  toko  yang  menjual  mahar pernikahan  yang  sudah  dibentuk  menjadi  berbagai macam model. Toko ini terdapat juga di media sosial Instagram untuk  pemasaran  model  -  model  yang sudah  dibentuk  sebelumnya  dengan  nama  akun @istana.mahar, semua produk mahar  ini  merupakan hasil produksi dan kreatifitas sendiri.
Pada  Toko  Istana  Mahar  sangat  sulit  untuk memasarkan model produk, menumpuknya data nota transaksi sehingga perlu banyak waktu untuk mencari data  yang  diinginkan,  sering  terjadi  hilangnya  bukti pembayaran  yang  dikirimkan  pelanggan  dan  sering terjadi  kesalahan  pada  saat  pencatatan  data  laporan dikarenakan  pencatatan  sendiri  dilakukan  pada pembukuan sehingga tidak akurat.
Berdasarkan  uraian  masalah  diatas  maka peneliti  bermaksud  untuk  membuatkan  sistem penjualan berbasis web yang berkonsep e-commerce yang  bertujuan  untuk  mempermudah  pelanggan untuk  melihat  semua  model  mahar  yang  ada, membuatkan  fasilitas  pendataan  transaksi  sehingga dapat  terekam  dengan  baik,  dan  mempermudah pelanggan untuk mengirimkan bukti pembayaran dari setiap  transaksi  yang  dilakukan,  serta  membuatkan
fitur  laporan  guna  meminimalisir  kesalahan  dalam pembuatan laporan.
Dalam  penulisan  ini  penulis  menentukan beberapa batasan yang terdiri dari pembuatan website e-commerce ini  dapat  menyimpan  data  transaksi secara realtime serta  membuat  fitur  konfirmasi pembayaran  dimana  pelanggan  wajib  melakukan upload bukti pembayaran kedalam website ini. E-Commerce sendiri atau  disebut  juga  sebagai perdagangan  elektronik  merupakan  aktifitas  yang berkaitan dengan pembelian, pemasaran barang atau jasa dengan  memanfaatkan sistem elektronik seperti internet, transaksi elektronik, pertukaran data dan lain sebagainya[1].
E-commerce sendiri  memiliki  berbagai  macam model  bisnis  seperti Business-to-Customer (B2C) yang diterapkan untuk E-commerce Istana Mahar ini dimana  transaksi  ini  hanya  berkaitan  dengan perusahaan bisnis dengan individu[5].
Pada pembuatan sistem penjualan berbasis web yang berkonsep e-commerce ini peneliti menerapkan metode Interaction  Flow  Modeling  Language (IFML).  Metode  ini  digunakan  oleh  peneliti  karena metode ini dapat mendukung peneliti untuk membuat sebuah  konten,  dan  juga action dari  pengguna  serta dapat menentukan perilaku dari sisi user itu sendiri. Didalam  penelitian  sebelumnya  yang  berjudul Sistem  Penjualan Spare  Part toko  AJM  Motor menggunakan CI berbasis arsitektur MVC, Universitas Budi luhur, Jakarta. Untuk mendapatkan
sebuah  informasi  yang  dapat  digunakan  dalam transaksi penjualan. Dalam dunia teknologi khususnya  pemrograman,  baik  itu  permrograman desktop maupun  perograman web semakin  marak pembuatan  program  menggunakan framework dan salah satu framework berbasis PHP yaitu CodeIgniter .  Framework  CI  memang  memudahkan developing dalam pembuatan aplikasi karena adanya pendekatan Models-Views-Controller (MVC)  dan pemrograman  berorientasi  objek.  Oleh  karena  itu, kami menggunakan CI dalam pembuatan aplikasi ini dengan Object Oriented Analysis and Design sebagai metode pengembangan system. Dengan dirancangnya sistem ini telah mempermudah pemilik toko  dalam  mengelola  data  pelanggan, supplier dan barang  yang  di  beli  dan  di  jual  serta  pembuatan laporan yang diperlukan untuk perhitungan penjualan dan  dapat  memberikaninformasi  yang  berguna  bagi pemilik toko secara up to date [6] .

## 2. METODE PENELITIAN
Pada gambar  1. dapat  dilihat  bagaimana kerangka berfikir penelitii untuk menjelaskan tentang tahapan  yang  dilakukan  peneliti  dalam  penelitian adalah sebagai berikut :
Gambar 1. Kerangka Berfikir

## 2.1   Analisis Data
Pendekatan  yang  digunakan  peneliti  ialah dengan  menggunakan  teknik  wawancara  untuk mendapatkan  sebuah  informasi  dan  permasalahan yang ada dengan melakukan sesi tanya jawab kepada pemilik,  observasi  yang  digunakan  untuk  melihat proses penjualan yang terjadi, serta analisa dokumen dan studi pustaka yang digunakan untuk  memperoleh informasi yang sesuai dengan kebutuhan sistem.

## 2.2 Analisis Sistem
Dilakukan  berdasarkan  hasil  analisa  yang dilakukan  pada  sistem  yang  ada  saat  ini,  sehingga dapat  menghasilkan  model  sistem  baru  yang diusulkan. Pada analisa sistem ini peneliti menggunakan Unified  Modeling  Language ,  UML sendiri ada beberapa jenis yaitu activity diagram, use case diagram, sequence diagram, dan class diagram .

## 2.3 Perancangan Sistem
Dalam tahap ini peneliti menggunakan Business Model Canvas untuk menganalisa model usaha yang dijalankan. Karena dapat membantu pemilik melihat dengan  akurat  seperti  apa  usaha  yang  dijalani. Melalui  model  bisnis  ini pemilik  juga dapat melihat secara  utuh  bagaimana  gambaran  secara  utuh  untuk menjawab semua pertanyaan seputar bisnis.
Pada  penelitian  ini  peneliti  juga  menggunakan Interaction Flow Modeling Language untuk mengekspresikan sebuah konten dan juga action dari pengguna  serta  dapat  menentukan  perilaku  dari  sisi user  itu  sendiri  dan back-end yang  sudah  dibuat. Dimana  kelebihan Interaction  Flow  Modeling Language sendiri  ialah  mempermudah  komunikasi desain interaksi pelanggan yang bersifat non teknis.

## 2.4 Pengembangan Sistem
Pada tahap ini peneliti mengembangkan sebuah sistem E-Commerce yang  dibuat  berbasis website menggunakan framework codeigniter .

## 2.5 Implemestasi
Setelah  sebuah  sistem  melalui  beberapa rangkaian  panjang  dan  sudah  berhasil  dibuat.  Maka peneliti menerapkan sistem tersebut pada Toko Istana Mahar.
3. HASIL DAN PEMBAHASAN
3.1. Business Model Canvas Business  Model  Canvas memiliki  9  blok  area yang  menggambarkan  sebuah  aktifitas  bisnis,  yang ditunjukan  untuk  menjabarkan  sebuah  strategi  guna membangun bisnis yang kuat. 9 blok itu sendiri terdiri dari Customer  Segment,  Value  Propositions, Channels, Reveneu Stream,  Customer Relationship, Key Activities, Key Resources, Key Partnership, dan Cost Structure [3]. Dalam  pembuatan website  e-commerce ini peneliti menggunakan Business Model Canvas untuk menganalisa  model usaha  seperti  yang  digambarkan pada gambar 2 :
Dari  model Business  Model  Canvas diatas  dapat diuraikan sebagai berikut :
a. Customer Segment
Dalam  Istana  Mahar  sendiri  memfokuskan customer  segment nya  pada  para  konsumen  yang memiliki usia 22 tahun keatas, atau dalam artian para konsumen yang siap menikah.
b. Value Proposition
Biaya  yang  ditawarkan  sudah  termasuk  ongkos kirim, menyediakan berbagai macam frame , kemudahan  dalam  pemesanan  dalam website ,  serta menyediakan undangan dan souvenir.
c. Channels
Melakukan  distribusi  dalam  penjualan  untuk konsumen  dengan  menyediakan website yang  ada yaitu maharkekinian.com serta account sosial media instagram untuk informasi penjualan.

## d. Customer Relationship
Menyediakan nomor whatsapp untuk komunikasi, menyediakan website e-commerce untuk pemesanan, dan  menyediakan  sosial  media  untuk  mempererat hubungan dengan pelanggan.
e. Revenue Stream
Pendapatan serta penghasilan sendiri didapat dari penjualan  produk  maupun  undangan  atau  souvenir dari toko offline maupun website serta mendapatkan keuntungan dengan adanya add-sense dari website.
f. Key Resources
Menyediakan  toko  offline,  serta  mempunyai inovasi dalam pembuatan model konsep, adanya akun instagram yang sudah dikenal, serta desainer produk.
g. Key Activites
Melakukan pembelian frame, melakukan perangkaian  mahar,  memposting  testimonial  hasil penjualan  di instagram ,  serta packing khusus  untuk barang yang dipesan.
h. Key Partnership
Bekerjasama  dengan  Bank  swasta  dalam  bidang modal  usaha,  pembuat frame ,  serta  desainer  produk untuk  menghasilkan  produk  yang  memuaskan pelanggan.

## i. Cost Structure
Biaya  pembuatan  produk,  pembiayaan  tenaga kerja,  administrasi website seperti  pembayaran domain dan hosting, serta  biaya  untuk  penyewaan tempat untuk toko offline.

## 3.2. Activity Diagram
Secara  grafis  digunakan  untuk  menjabarkan tentang rangkaian aktifitas  yang ada, dan  juga dapat digunakan  untuk  memodelkan action yang  akan
dilakukan  saat  sebuah  operasi  dieksekusi,  dan menampilkan hasil dari action tersebut[4] .
Berikut ini adalah activity diagram usulan yang sudah dibuat peneliti untuk toko Istana Mahar : a. Proses Pemesanan Model Mahar
Pada gambar 3. dijelaskan dimana pelanggan bisa memilih  model  yang  disediakan  dihalaman  utama atau  memilih  berdasarkan  kategori,  kemudian memilih  button add  to  cart yang  ada  pada  gambar model, maka akan secara otomatis model yang dipilih akan  masuk  kedalam  keranjang  belanja,  jika pelanggan setuju maka memilih button checkout yang disediakan,  dan  pelanggan  melanjutkan  dengan mengisi form detail pembayaran dan memilih button konfirmasi,  jika  tidak  setuju  pelanggan  memilih button dan diarahkan kembali kehalaman Home.
Gambar 3. Activity Diagram Pemesanan Model Mahar
b. Proses Konfirmasi Pembayaran
Pada gambar  4. dijelaskan  pelanggan  harus melakukan  pembayaran  yang  sesuai,  setelah  itu melakukan login kedalam sistem  dan masuk kedalam menu  user  kemudian  memilih  menu  konfirmasi, setelah  itu  pelanggan  memilih  pesanan  mana  yang harus  dikonfirmasi.  Selanjutnya  pelanggan  mengisi form konfirmasi  dengan  data  yang  sesuai  dan melakukan upload bukti  pembayarannya  dan memilih button submit .
Gambar 4. Activity Diagram Konfirmasi Pembayaran
c. Proses Laporan Pada gambar  5. dijelaskan  admin  mengakses halaman admin dan masuk kedalam dashboard admin dari websitei Istana Mahar kemudian  memilih  menu laporan  yang  diinginkan,  kemudian  memilih button cetak.  Admin  akan  memberikan  laporan  tersebut kepada pemilik toko Istana Mahar Tangerang.
Gambar 5. Activity Diagram Laporan

## 3.3. Use Case Diagram
Use  Case digunakan  untuk  memvisualisasikan atau menggambarkan hubungan antara actor dan use case dan  mempresentasikan  kegunaan  atau  fungsi  – fungsi system dari prespektif pengguna[4].
Berikut ini adalah use case diagram yang sudah dibuat oleh peneliti : a. Use Case Diagram Master Pelanggan Dapat  dilihat gambar  6. menunjukan  bahwa pelanggan  memiliki  2 use  case yang  menunjukan
fungsi dari master pelanggan. Dan actor yang terlibat pada  sistem master pelanggan  hanya  satu  yaitu pelanggan.
Gambar 6. Use Case Diagram Master Pelanggan
b. Use Case Diagram Transaksi Dapat  dilihat gambar  7. menunjukan  bahwa pelanggan  memiliki  4 use  case yang  menunjukan fungsi  dari  transaksi  pelanggan  yaitu  memilih product, checkout ,  konfirmasi  pembayaran,  dan update  profile .  dan actor yang  terlibat  pada  sistem transaksi pelanggan hanya satu yaitu pelanggan.
Gambar 7. Use Case Diagram Transaksi
c. Use Case Diagram Laporan Dapat  dilihat gambar  8. menunjukan  bahwa administrator memiliki 5 use case yang menunjukan fungsi  dari  laporan  pada  sistem.  Dan actor yang terlibat  pada  sistem  laporan  ada  dua  yaitu administrator dan pemilik.
Gambar 8. Use Case Diagram Laporan
3.4. Class Diagram
Menggambarkan struktur object system , merupakan  kumpulan  objek  yang  mempunyai struktur  umum, behaviour umum  dan  menunjukan hubungan antar class dari sistem secara logika [4]. Berikut gambar  9. adalah class  diagram yang sudah dibuat oleh peneliti:
Gambar 9. Class Diagram

## 3.5. Struktur Tampilan Menu
Digunakan  untuk  memudahkan  penelusuran alur  program  pada  saat  kita  menjalankan  program seperti pada gambar 10 .
Gambar 10. Tampilan Menu Pelanggan

## 3.6. Interaction Flow Modeling Language
Bahasa  pemodelan  yang  terinspirasi  dari WebML  dan  mewakilkan  generalisasi  dari  domain web untuk generic pemodelan front-end [2].
Berikut  ini  adalah  rancangan Interaction  Flow Modeling Language yang sudah dibuat oleh peneliti : Pada gambar  11. dapat  dilihat  pelangan  yang ingin  melakukan  pemesanan  harus  menekan  tombol add  to  cart pada  halaman  awal  maupun  halaman produk  detail,  kemudian  sistem  akan  menambahkan produk  kedalam  keranjang  belanja.  Pada  halaman
keranjang  belanja  pelanggan  dapat  mengubah maupun menghapus produk dari keranjang belanja.
Gambar 11. IFML Keranjang Belanja
Pada gambar  12. dapat  dilihat  pelanggan diharuskan mengisi sebuah form konfirmasi pembayaran  pada  halaman  konfirmasi,  setelah  itu sistem  akan  menyimpan  data  konfirmasi  yang dilakukan  dan  menampilkan  notifikasi  konfirmasi sukses.
Gambar 12. IFML Konfirmasi Pembayaran
Pada gambar  13. dijelaskan  bahwa  Admin  bisa memilih  tanggal  awal  dan  tanggal  akhir  kemudian memilih button  submit kemudian  sistem  akan menampilkan data sesuai tanggal yang dipilih beserta total  pendapatan  yang  didapat  sesuai  periode  yang dipilih.
Gambar 13. IFML Laporan Pendapatan
3.7. Tampilan Layar
a. Halaman Pemesanan Model
Pada gambar  14. merupakan  tampilan  halaman pemesanan model yang diakses dengan cara melihat detail model.
Gambar 14. Halaman Pemesanan Model
b. Halaman Konfirmasi Pembayaran Pada gambar  15. merupakan  tampilan  halaman konfirmasi  pembayaran  yang  diakses  pelanggan melalui menu konfirmasi pembayaran.
Gambar 15. Halaman Konfirmasi Pembayaran
c. Keluaran Laporan Pendapatan
Pada gambar  16 .  merupakan  tampilan  hasil cetakan  dari  laporan  pendapatan  yang  diakses
dengan  cara  memilih  periode  pada  halaman administrator.
Gambar 16. Keluaran Laporan Pendapatan

## 3.8. Sequence Diagram
Menggambarkan  scenario  atau  rangkaian  yang dilakukan  sebagai  sebuah  respon  dari event yang menghasilkan output tertentu.  Diawali  dengan melakukan trigger pada aktifitas tersebut[4].
Berikut  ini  adalah sequence  diagram yang dibuat oleh peneliti pada penelitian ini : a. Sequence Digram Pemesanan Model
Berdasarkan gambar  17. diketahui  bahwa sequence  diagram pemesanan  model  melibatkan actor pelanggan dan  6 object class .
Gambar 17. Sequence Diagram Pemesanan Model
b. Sequence Diagram Konfirmasi Pembayaran
Pada gambar  18. diketahui  bahwa sequence diagram konfirmasi pembayaran melibatkan satu actor pelanggan dan 4 object class.
Gambar 18. Sequence Diagram Konfirmasi Pembayaran
c. Sequence Diagram Laporan Pendapatan
Pada gambar  19. diketahui  bahwa sequence diagram laporan  pendapatan  melibatkan  satu actor admin dan 5 object class.
Gambar 19. Sequence Diagram Laporan Pendapatan

## 3.9. Hasil Penelitian
Berdasarkan  masalah  yang ada pada penelitian ini, peneliti  menentukan  hasil atau  fitur  yang dibuat untuk  menyelesaikan  atau  menjawab  permasalahan yang ada sebagai berikut :
a. Denga  adanya website e-commerce ini  pemilik dapat  memasarkan  produk  secara  keseluruhan tidak terkecuali dengan produk lama yang hanya terlihat bila pelanggan datang ke toko.
b. Dengan  adanya  fitur  konfirmasi  pembayaran dalam website ini dapat menyelesaikan permasalahan  yang  ada  dimana  sebelumnya pemilik  sangat  sulit  untuk  mendata  semua  bukti pembayaran yang dikirimkan oleh pelanggan.
c. Dengan  adanya website  e-commerce ini  pemilik dapat  merekam  semua  data  transaksi  yang  ada pada  toko  Istana  Mahar  secara  periodik  yang menjawab  permasalahan  sebelumnya  dimana pemilik harus  mencari data  yang diinginkan dari tumpukan nota yang ada.
d. Dengan  adanya  fitur  laporan  dalam website ini menjawab  permasalahan  yang  ada  sebelumnya sehingga memudahkan dan meminimalisir kesalahan pencatatan laporan yang dilakukan oleh pegawai yang ada ditoko.

## 4. KESIMPULAN
Dalam penerapan e-commerce pada toko Istana
Mahar  terdapat  beberapa  kesimpulan  yang  sudah peneliti buat diantaranya :
a. Dengan adanya website e-commerce ini mempermudah pelanggan  melihat semua produk yang  ditawarkan  sehingga  pelanggan  tidak kesulitan  lagi  untuk  melihat  semua  produk  yang ditawarkan.
b. Dengan  adanya  fasilitas  pendataan  transaksi sehingga  dapat  merekam  hasil  transaksi  dari setiap pelanggan  sehingga pemilik dapat melihat semua data transaksi yang terjadi, tidak perlu lagi mencari data transaksi dari nota yang ada ditoko.
c. Dengan  adanya  fitur  konfirmasi  pembayaran dapat  mempermudah  pelanggan  mengirimkan bukti  pembayaran  disetiap  transaksinya  dan mempermudah pemilik toko untuk menyesuaikan dengan transaksi yang dilakukan.
d. Dengan  adanya  fitur  laporan  maka  dapat meminimalisir  kesalahan  dalam  pencatatan  data laporan  sehingga  pemilik  dapat  memperoleh semua data laporan yang diinginkan secara akurat.

## DAFTAR PUSTAKA
[1] Ummah, L.D. “Rancang Bangun E-Commerce Pada Toko  Kerudung  Nuri  Collection  Berbasis  Customer
Relationship Management” . Jurnal Nuansa
Informatika , vol.12, pp.1-8, Juli. 2018.
[2] (2018)  IFML:  The  Interaction  Flow  Modeling Language [Online]. Available: http://www.ifml.org/
[3] Christianti,  Y.A,  “Business  Model  Sebagai  Strategi Bersaing  Untuk  Pelaku  Bisnis  Pemula  Studi  Kasus: Bisnis Hijab”. Buletin Bisnis & Manajemen., vol. 3, pp. 1-12, Februari 2017.
[4] Syafei  Henderi, “Object  Oriented  Design  With Unified Modeling Language (UML)” M.Kom. tesis. Teknologi Informatika, STMIK Raharja, Tangerang, Indonesia, November 2010.
[5] Yasril,  R.,  &  Christianto.  “Perancangan  Sistem Informasi  Berbasis  Web  Pada  HI  Gadget  Store” . JURSIMA Jurnal Sistem Informasi dan Manajemen, vol. 6, pp. 1-11, Mei 2018.
[6] Setiadi, A  & Alfiah, F. “Sistem Penjualan Spare Part Toko  AJM  Motor  Menggunakan  CI  berbasis Arsitektur  MVC” .  Jurnal  Simetris, vol. 7,  pp  575- 586, November 2016