## PENEREPAN WEBSITE E-COMMERCE BERBASIS CONTENT
MANAGEMENT SYSTEM (CMS) UNTUK PELAYANAN PENJUALAN PADA MSFASHIONERS
Anggraini Ujianti 1) , Gandung Triyono 2)
1 Sistem Informasi, Fakultas Teknologi Informasi, Universitas Budi Luhur
1,2 Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260 E-mail: anggrainiujianti @gmail.com 1) , gandung.triyono @budiluhur.ac.id 2)

## Abstrak
Belakangan ini telah banyak sekali media berita menyajikan beragam informasi menarik seputar dunia fashion. Perkembangan dunia fashion yang berkiprah di Indonesia itu sendiri dapat dikatakan mengalami peningkatan. Salah satu brand lokal yang memulai usaha di dunia fashion, yaitu MsFashioners. MsFashioners merupakan suatu bidang usaha yang menjual berbagai macam model kebaya modern, gamis, dan kemeja batik sarimbit. Masalah yang sering dihadapi MsFashioners adalah kurangnya ketelitian dalam mengolah data yang cukup banyak jumlahnya, sehingga terjadi kesalahan dalam proses pembuatan laporan. Dan juga tampilan serta penataan daftar produk masih kurang terstruktur dengan baik. Metode yang digunakan adalah Business Model Canvas   (BMC)   yang   akan   digunakan   untuk   menganalisis   model   bisnis   MsFashioners.   Penelitian   ini menghasilkan dengan adanya website ini mempermudah admin dalam membuat laporan yang dibutuhkan dalam waktu yang lebih singkat dan juga mengurangi tempat penyimpanan arsip/berkas. Dengan adanya website ini maka   dapat   memperluas   pemasaran   dan   pelanggan   menjadi   lebih   mudah   mendapatkan   informasi   terbaru tentang produk MsFashioners .
Kata kunci: E-Commerce, Business Model Canvas, Woocommerce, Batik.

## 1. PENDAHULUAN
Kemajuan   teknologi   saat   ini   mengalami perkembangan   yang   sangat   cepat,   seiring   dengan kebutuhan   manusia   yang   juga   terus   bertambah.
Teknologi memegang peranan yang sangat penting bagi kehidupan manusia, salah satunya yaitu dengan hadirnya   jaringan   internet.   Dengan   kehadiran internet memungkinkan setiap orang dengan mudah melakukan   hal   jual   beli   dengan   memanfaatkan e- commerce .
Belakangan   ini,   telah   banyak   sekali   media berita   menyajikan   beragam   informasi   menarik seputar dunia fashion . Perkembangan dunia fashion yang   berkiprah   di   Indonesia   itu   sendiri   dapat dikatakan mengalami peningkatan. Salah satu brand lokal  yang  memulai  usaha  di   dunia fashion ,  yaitu MsFashioners.   MsFashioners   berada   di   Jalan   H. Jegu, Cipadu Jaya. MsFashioners merupakan suatu bidang usaha yang menjual berbagai macam model kebaya modern, gamis, dan kemeja batik sarimbit.
Masalah   yang   sering   dihadapi   MsFashioners adalah   kurangnya   ketelitian   dalam   mengolah   data yang   cukup   banyak   jumlahnya,   sehingga   terjadi kesalahan   dalam   proses   pembuatan   laporan.   Dan juga   tampilan   serta   penataan   daftar   produk   masih kurang terstruktur dengan baik.
Dengan   ini   dibutuhkannya   sebuah website berupa e-commerce yang   bertujuan   untuk   dapat membantu   penjual   dalam   pengolahan   data   dan
transaksi yang dilakukan melalui media website e- commerce .

## 2. PENELITIAN SEBELUMNYA
Penelitian   sebelumnya   yang   telah   dipelajari seperti penelitian [1] mengenai teori penjualan yang merupakan   aktivitas   jual   beli   barang   maupun   jasa untuk memperoleh laba.
Penelitian [2] mengenai e-commerce merupakan   sebuah   transaksi   secara online antara penjual   dan   pembeli   melalui   jaringan   internet sebagai perantara.
Penelitian [3] mengenai business model canvas merupakan gambaran model bisnis yang memiliki 9 pilar yang bertujuan untuk membuat rencana bisnis agar memperoleh laba.
Penelitian [4] mengenai woocommerce merupakan   sebuah plugin   wordpress guna memudahkan pengguna dalam membuat sebuah toko online .
Penelitian   yang   dilakukan  [5]  tentang perancangan e-commerce batik  pada  batik Banten, permasalahan   yang   terjadi   yaitu   kurangnya pemasaran   dalam   penjualan.   Metode   yang digunakan adalah metode waterfall , dari penelitian tersebut menghasilkan pengusaha dapat menjual dan memasarkan produknya lebih luas lagi.
Penelitian   yang   dilakukan  [6]  tentang perancangan e-commerce berbasis website pada toko
Mirabella   batik   Jambi,   permasalahan   yang   terjadi yaitu   kurangnya   pemasaran   dalam   penjualan   dan pemesanan hanya dapat dilakukan melalui toko saja. Metode   yang   digunakan   adalah   metode waterfall , dari penelitian tersebut menghasilkan memudahkan pelanggan  untuk melihat  produk  secara detail dan melakukan pemesanan tanpa harus datang ke toko hanya dengan mengakses situs web e-commerce toko Mirabella Batik Jambi.
Penelitian yang dilakukan  [7]  tentang analisis dan   perancangan   sistem   informasi e-commerce berbasis web pada   UMKM   batik   Rindiani   Jambi, permasalahan   yang   terjadi   yaitu   kesulitan   dalam melakukan   penjualan   dan   promosi   produk   yang menjangkau   pasar   yang   lebih   luas.   Metode   yang digunakan adalah metode waterfall , dari penelitian tersebut   menghasilkan   dengan   adanya   sistem e- commerce ini   mampu   meningkatkan   penjualan produk yang ada di UMKM Rindiani.

## 3. METODE PENELITIAN
Dalam melakukan penelitian ini menggunakan langkah sebagai berikut:
Penjelasan   dari   Gambar   1   sebagai   berikut: Untuk menganalisa masalah-masalah yang ada pada MsFashioners   ini,   maka   tahap   pertama   yang dilakukan dengan wawancara, analisa dokumen dan studi literatur yang terkait dengan proses berjalan, sehingga   peneliti   dapat   mengetahui   masalah   yang ada.   Lalu   menganalisa   sistem   untuk   mengetahui kebutuhan   sistem   pada   MsFashioners   dan   dapat merancang   sistem   usulan.   Kemudian   metodologi menggunakan Business   Model   Canvas (BMC) . Setelah   itu   peneliti   melanjutkan   ketahap pengembangan   prototipe   dengan   metode Content Managemet   System (CMS ). Tahap   terakhir melakukan   pengujian   sistem   untuk   memeriksa apakah suatu program yang dihasilkan sudah dapat dijalankan sesuai dengan kebutuhan.

## 3.1. Analisa Model Bisnis
Analisa   sistem   dilakukan   untuk mengidentifikasi sistem berjalan pada instansi guna mengetahui   kebutuhan   sistem   yang   akan   dibuat untuk menyelesaikan masalah. Analisa sistem dapat digambarkan dengan Business Model Canvas . BMC digunakan   untuk   mendeskripsikan   dan mengidentifikasi model bisnis yang sedang berjalan maupun membuat strategi bisnis baru.

## 3.2. Desain Sistem
Metode   perancangan   sistem   dilakukan   untuk mengetahui masalah yang terjadi untuk mengetahui kebutuhan sistem. Metode perancangan sistem dapat dilakukan dengan memahami proses sistem berjalan yang terjadi. Perancangan sistem dapat digambarkan dengan:
a. Unified Modeling Language (UML)
1) Activity   diagram ,   digunakan   untuk menggambarkan   proses   bisnis   dan   urutan aktifitas   dalam   sebuah   proses.   Peneliti menggunakan Microsoft   Visio untuk membuatnya.
2) Use   case   diagram ,   digunakan   untuk kegiatan apa saja yang dapat dilakukan oleh user /   pengguna   sistem   yang   sedang berjalan.   Peneliti   menggunakan Microsoft Visio untuk membuatnya.
3) Use   case   description, digunakan  untuk memberikan   gambaran   umum   tentang fungsionalitas   suatu   proses   bisnis   yang didalamnya   melibatkan   sebuah   sistem. Peneliti   menggunakan Microsoft   Visio untuk membuatnya.
4) Class   diagram, digunakan   untuk menggambarkan   struktur   dan   deskripsi class, package dan objek beserta hubungan satu   sama   lain.   Peneliti   menggunakan Microsoft Visio untuk membuatnya.
5) System sequence diagram, digunakan untuk menjelaskan   interaksi   sistem   obyek   yang disusun dalam suatu urutan waktu. Urutan waktu   yang   dimaksud   adalah   urutan kejadian yang dilakukan oleh seorang actor dalam   menjalankan   system.   Peneliti menggunakan Draw.io untuk membuatnya.
b. Rancangan Layar (User Interface) User   Interface, digunakan   untuk   proses membangun   koneksi   antar   muka   aplikasi.   Peneliti menggunakan Balsamiq   Mockups 3   untuk membuatnya.

## 3.3. Pengembangan Prototipe
Pembuatan   prototipe   dilakukan   untuk memberikan   gambaran   kebutuhan   kepada user terhadap   sistem   usulan   yang   akan   dibuat MsFashioners. Berikut ini adalah beberapa hal yang
Gambar 1. Langkah Penelitian
akan   dilakukan   dalam   pengembangan   prototipe sistem informasi pada MsFashioners:
a. Desain Sistem Desain   sistem   adalah   tahap   setelah   analisa sistem   dari   siklus   pengembangan   sistem   yang mendefinisikan   dari   kebutuhan-kebutuhan fungsional,   persiapan   untuk   rancang   bangun implementasi,   menggambarkan   bagaimana   suatu sistem dibentuk yang dapat berupa penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari   beberapa   elemen   yang   terpisah   kedalam   satu kesatuan yang utuh dan berfungsi. Pada penelitian ini   menggunakan   desain business   model   canvas (BMC)   dan class   diagram untuk   perancangan database pada website yang   akan   diusulkan.   Dan dalam merancang user interface pada penelitian ini, diharapkan dapat memberikan pengalaman interaksi yang mudah dipahami user.
b. Konfigurasi CMS
Content   Management   System (CMS)   yang digunakan   adalah   dengan   plugin woocommerce WordPress untuk mempermudah pembuatan website yang diusulkan akan digunakan.
c. Pembelian Web Domain dan Hosting Pembelian   atau   penyewaan web hosting diperlukan   untuk   meletakkan file-file   website agar dapat diakses dari internet. Sedangkan web domain merupakan   alamat   dari website yang   akan   dibuat. Pembelian/penyewaan web domain juga diperlukan untuk website yang   telah   diusulkan   dan   dapat diakses lewat internet secara online oleh pelanggan atau user .

## 3.4. Pengujian Sistem
Pada   tahap   ini   dilakukan   pengujian   terhadap sistem untuk memeriksa apakah suatu program yang dihasilkan   sudah   dapat   dijalankan   sesuai   dengan kebutuhan.   Pengujian   sistem   merupakan   hal terpenting   yang   bertujuan   untuk   menemukan kesalahan-kesalahan   atau   kekurangan-kekurangan pada sistem.
4. HASIL DAN PEMBAHASAN
4.1. Hasil Analisa Dengan BMC Berikut ini adalah 9 pilar BMC, yaitu:
Pada   Gambar   2   menggambarkan   kondisi metedologi Business   Model   Canvas (BMC)   yang ada di MsFashioners. Berikut penjelasannya:
a. Value Proposition
Adalah   blok   pertama   yang   harus   diisi   dan merupakan nilai lebih atau keunggulan produk yang tawarkan   untuk   pelanggan.   Berikut value proposition yang sesuai dengan MsFashioners, yaitu: MsFashioners menjual berbagai model kebaya gamis dengan   desain   yang   unik   dan   juga   harga   yang murah.
b. Customer Segment Langkah   selanjutnya   adalah   mencari   target yang   mungkin   tertarik   dengan   produk   yang ditawarkan.   Berikut   adalah   target   pelanggan   pada Msfashioners, yaitu pria dan wanita serta remaja dan mahasiswa.
c. Customer Relationship Adalah   cara   MsFashioners   untuk berkomunikasi   dengan   para   pelanggan.   Berikut customer   relationship yang   sesuai   dengan MsFashioners, yaitu memberikan potongan harga.
d. Channels Merupakan   metode   MsFashioners   dalam menawarkan   produknya   kepada   para   pelanggan. Berikut channels yang sesuai dengan MsFashioners, yaitu media sosial dan website .
e. Key Activities Adalah kegiatan penting yang dilakukan oleh
MsFashioners   untuk   menghasilkan   suatu keberhasilan   usaha.   Berikut key   activities yang sesuai dengan MsFashioners, yaitu:
1) Mendesain kebaya gamis yang unik.
2) Melakukan packing produk.
3) Melakukan survey untuk harga.
f. Key Resources Merupakan   sumberdaya   yang   diperlukan MsFashioners   dalam   mencapai   keberhasilannya. Berikut key   resources yang   sesuai   dengan MsFashioners, yaitu handphone, laptop, internet dan karyawan.
g. Key Partners Merupakan   pihak-pihak   yang   bisa   menjalin kerjasama   dengan   MsFahioners.   Berikut key partners yang sesuai dengan MsFashioners, yaitu:
1) Toko Bahan Kain
2) Konveksi
3) Ekspedisi: JNE, J&T, dan SiCepat.
h. Cost Structure Merupakan   biaya   yang   harus   dikeluarkan
Msfashioners untuk menjalankan usahanya. Berikut cost   structure yang   sesuai   dengan   MsFashioners, yaitu:
1) Gaji Pegawai
2) Photografer
3) Model
Gambar 2. Business Model Canvas
i. Revenue Stream Merupakan hasil keuntungan yang didapatkan
oleh   MsFashioners   dalam   menjual   produknya. Berikut revenue   stream yang   sesuai   dengan MsFashioners,   yaitu   penjualan   kebaya   dan   batik sarimbit pada MsFashioners.

## 4.2. Proses Bisnis Model Usulan
a. Pendaftaran Pelanggan (Registrasi) Pelanggan yang ingin memesan produk harus mendaftar akun terlebih dahulu dengan cara masuk ke website msfashioners.   Jika   pelanggan   sudah pernah melakukan registrasi maka pelanggan dapat langsung   melakukan login .   Untuk   lebih   jelasnya, proses registrasi dapat dilihat pada Gambar 3.
b. Pemesanan Produk
Pelanggan yang hendak membeli harus masuk ke website terlebih   dahulu   setelah   itu   pelanggan dapat   memilih   produk   yang   diinginkan   dan   klik select  options . Kemudian masuk ke  halaman cart , pelanggan   dapat   meng input jumlah   produk   yang ingin dibeli beserta ukuran dan warna. Setelah itu klik view   cart ,   lalu   klik proceed   to   checkout . Kemudian sistem akan mengecek apakah pelanggan sudah login atau belum. Jika pelanggan belum login maka   sistem   akan   memunculkan form   login .   Jika sudah login ,   pelanggan   diharuskan   mengisi form Checkout . Kemudian  pesanan akan  divalidasi  oleh sistem apabila pesanan sudah valid dan sistem akan menyimpan data pesanan kemudian sistem langsung kirim e-mail   invoice. Untuk   lebih   jelas,   proses pemesanan produk dapat dilihat pada Gambar 4.
c. Konfirmasi Pembayaran
Pelanggan melakukan pembayaran, setelah itu pelanggan   harus   konfirmasi   pembayaran   dengan cara login pada website MsFashioners.   Masuk   ke menu   konfirmasi   pembayaran   dan   mengisi form tersebut.   Kemudian admin mengecek   apabila pembayaran   sudah   sesuai   akan   dikonfirmasi   dan merubah status pembayaran oleh admin. Untuk lebih jelasnya,   proses   konfirmasi   pembayaran   dapat dilihat pada Gambar 5.
d. Pembuatan Laporan
Admin akan   melakukan   pembuatan   laporan dengan cara login terlebih dahulu. Kemudian admin dapat   memilih   laporan   yang   diinginkan   (laporan rekapitulasi   penjualan,   laporan   rekapitulasi   produk terlaris,   laporan   penjualan,   laporan   pembayaran, laporan   pengiriman   dan   laporan   retur)   kemudian admin dapat mencetak setiap bulannya. Untuk lebih jelasnya,   proses   pembuatan   laporan   dapat   dilihat pada Gambar 6.
Gambar 3. Pendaftaran Pelanggan (Registrasi)
Gambar 4. Pemesanan Produk
Gambar 5. Konfirmasi Pembayaran
4.3. Use Case Diagram
a. Use Case Diagram Master
Use case diagram master pada MsFashioners terbagi   menjadi   2   sisi,   dari   sisi user (calon pelanggan)   dan Admin .   Berikut   gambar use   case diagram master:
1) Use Case Diagram Master Pelanggan Use   case   diagram master   pelanggan menggambarkan   bahwa   pelanggan   dapat registrasi   dan login pada website MsFashioners.  Untuk lebih  jelasnya  dapat dilihat pada Gambar 7.
2) Use Case Diagram Master Admin
Use   case   diagram master admin menggambarkan   bahwa admin dapat mengentry produk   pada website
MsFashioners.  Untuk lebih  jelasnya  dapat dilihat pada Gambar 8.
b. Use Case Diagram Transaksi Use case diagram transaksi pada MsFashioners terbagi   menjadi   2   sisi,   dari   sisi user (calon pelanggan)   dan Admin .   Berikut   gambar use   case diagram transaksi:
1) Use Case Diagram Transaksi Pelanggan Use case diagram transaksi pelanggan berisi   entri   pemesanan,   konfirmasi pembayaran dan entri retur. Pada use case diagram transaksi   ini   terdapat   aktor   aktif
yaitu pelanggan. Untuk lebih jelasnya dapat dilihat pada Gambar 9.
2) Use Case Diagram Transaksi Admin Use   case   diagram transaksi admin berisi login , view pesanan,   verifikasi pembayaran,   update   pengiriman   dan verifikasi   retur.   Pada Use   Case   Diagram transaksi   ini   terdapat   aktor   aktif   yaitu Admin , sedangkan untuk aktor  pasif yaitu bagian sistem. Untuk lebih jelasnya dapat dilihat pada Gambar 10.
c. Use   Case   Diagram   Laporan  Use   Case Diagram Laporan   berisi   cetak   laporan rekapitulasi   penjualan,   cetak   laporan rekapitulasi   produk   terlaris,   cetak   laporan penjualan,   cetak   laporan   pembayaran,   cetak laporan pengiriman, cetak laporan retur seperti pada gambar 11 dibawah ini.
Gambar 6. Pembuatan Laporan
Gambar 7. Use Case Diagram Master Pelanggan
Gambar 8. Use Case Diagram Master Admin
Gambar 9. Use Case Diagram Transaksi Pelanggan
Gambar 10. Use Case Diagram Transaksi Admin

## 4.4. Class Diagram
Berikut class diagram yang terjadi di website MsFashioners:
Pada   Gambar   12   menjelaskan class   diagram yang   terjadi   pada website MsFashioners.   Tabel wpqp3t_ posts berisikan   data-data   produk MsFashioners   dan   berelasi   dengan   tabel wpqp3t_terms. Tabel wpqp3t_users berisikan   data pelanggan . Tabel wpqp3t_comments berisikan review produk yang  di  beli  oleh  pelanggan . Tabel wpqp3t_order berisikan order an  pelanggan.  Tabel wpqp3t_wc_warranty_products berisikan data retur produk dari pelanggan .

## 4.5. Rancangan Layar
a. Pendaftaran Pelanggan (Registrasi) Rancangan   layar   pada   Gambar   15   ini digunakan   untuk   pelanggan   yang   akan   melakukan registrasi dan login ke website MsFashioners. Dan nantinya data akan tersimpan dalam database.
b. Pemesanan Produk (Cart)
Rancangan   layar   pada   Gambar   16   ini menjelaskan, cart ini akan tampil ketika pelanggan memilih produk yang akan dibeli. Terdiri dari image product,   price,   quantity, dan   total   yang   harus dibayarkan.   Selesai   melakukan cart ,   data   akan tersimpan ke dalam database.
c. Pembayaran (Checkout)
Rancangan   layar   pada   Gambar   17   ini menjelaskan, checkout ini   akan   tampil   setelah pelanggan selesai melakukan cart , pelanggan akan diharuskan   meng input   billing   details dan   memilih ekspedisi   pengiriman.   Setelah   selesai   meng input checkout , data akan tersimpan ke dalam database.
d. Laporan Rancangan   layar   pada   Gambar   18   ini menjelaskan, laporan penjualan ini digunakan admin untuk   memudahkan admin dalam   mengetahui penjualan produk msfashioners setiap bulannya.

## 5. KESIMPULAN
Dengan   adanya website ini   mempermudah admin   dalam   membuat   laporan   yang   dibutuhkan
Gambar 12. Class Diagram
Gambar 13. Rancangan Layar Pendaftaran Pelanggan (Registrasi)
Gambar 14. Rancangan Layar Pemesanan Produk (Cart) Gambar 15. Rancangan Layar Pembayaran (Checkout)
Gambar 16. Rancangan Layar Laporan
dalam   waktu   yang   lebih   singkat   dan   juga mengurangi tempat penyimpanan arsip/ berkas.
Dengan   adanya website ini   maka   perusahaan dapat   memperluas   pemasaran   dan   pelanggan menjadi lebih mudah mendapatkan informasi terbaru tentang produk MsFashioners

## 6. DAFTAR PUSTAKA
[1] A.   Prasetyo   and   R.   Susanti,   “Sistem   Informasi Penjualan Berbasis Web Pada PT . Cahaya Sejahtera Sentosa Blitar,” Ilm. Teknol. dan Informasia ASIA , vol. 10, no. 2, pp. 1–16, 2016.
[2] Masitah,   Abdullah,   and   Ilyas,   “E-Commerce Penjualan   Pakaian   Pada   Lapak   Mariati   Berbasis Web,” Intra-Tech , vol. 2, no. 2, pp. 1–11, 2018.
[3] Y.  Yurike  and W. L.  Sahetapy,  “Analisis Business Model Canvas Pada Ud Diamond Motor,” AGORA , vol. 6, no. 2, pp. 1–5, 2018.
[4] W.   Komputer, Membangun   Toko   Online Multiproduk Dengan Wordpress Dan Woocommerce . Elex Media Komputindo, 2014.
[5] I. Yunita and L. Suryani, “Perancangan E-Commerce Batik Pada Batik Banten,” Ilm. Sains Teknol. , vol. 1, no. 2, pp. 66–81, 2018.
[6] A. R. Rachman and E. Fernando, “Perancangan E- Commerce   Berbasis Website   Pada  Toko  Mirabella Batik Jambi,” Processor , vol. 12, no. 2, 2017.
[7] D. Setiawan and Lutfi, “Analisis dan Perancangan Sistem  Informasi e-Commerce Berbasis Web Pada UMKM  Batik Rindani   Jambi,” Sains  Sosio Hum. , vol. 2, no. 1, pp. 69–78, 2018.