## PENERAPAN CONTENT MANAGEMENT SYSTEMWORDPRESS
DAN BUSINESS MODEL CANVAS UNTUK MENGEMBANGKAN

## WEBSITE E-COMMERCE PADA TOKO KHAYANGAN OUTDOOR
Meydiana Putri 1) , Bima Cahya Putra 2)
1 Sistem Infomasi, Fakultas Teknologi Informasi, Universitas Budi Luhur
1,2 Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260 E-mail : meydnptr14@gmail.com 1 ) , bimo.cahyoputro@budiluhur.ac.id 2)

## Abstrak
Aktivitas transaksi jual-beli barang dengan pelanggan yang dilakukan secara online menggunakan komputer yang terhubung  dengan  internet  adalah  proses  yang  sering  dilakukan  oleh  para  pedagang  yang  bergerak  dibidang penjualan.  Pada umumnya proses transaksi  jual-beli biasanya sering  dilakukan secara bertatap muka dengan pelanggan.  Contohnya  yang  terjadi  pada  Toko  Khayangan  Outdoor,  toko  yang  menjual  peralatan  pendakian gunung ini masih menggunakan toko fisik sehingga proses penjualan hanya dapat diakses dengan datang ke toko saja, dalam penggunaan media promosi toko ini hanya menggunakan media Whatsapp saja sehingga untuk proses pemesanan para pelanggan masih harus datang ke toko untuk membeli produk yang harus membutuhkan waktu dan  tenaga,  sekaligus  menyediakan  dana  untuk  transportasi  datang  ke  toko  adalah  termasuk  proses  yang menyulitkan  untuk  para  pelanggan.  Pembuatan  laporan  hasil  penjualan  masih  berupa  pembukuan  sehingga mengakibatkan  laporan  tidak  akurat.  Oleh  karena  itu  peneliti  akan  membahas  website  penjualan  berbasis  e- commerce dengan penerapan business model convas untuk meningkatkan dan mempermudah penjualan pada toko khayangan  outdoor  di  daerah  jakarta  selatan  yang  menggunakan  konsep  e-commerce  untuk  dapat mengembangkan penjualan dengan jangkauan yang lebih luas dan dapat memudahkan akses informasi kepada para pelanggan.
Kata kunci: Business Model Canvas , E-Commerce , Alat Pendakian Gunung.

## 1. PENDAHULUAN
E-Commerce adalah dimana dalam satu website menyediakan  atau  mengubah  transaksi  jual  beli  dan pembayaran  dari  cara  konvensional  dalam  bentuk elektronik  berbasis  komputer  dan  terhubung  dengan internet [1].  Selain  proses  transaksi  bisa  menjadi lebih  cepat,  konsep  toko online atau e-commerce dapat  memotong  banyak  biaya  operasional  karena penjual  tidak  diharuskan  mempunyai  toko  fisik. Kehadiran e-commerce sendiri  sebagai  media transaksi  yang  tentunya  dapat  menguntungkan banyak  pihak,  baik  pihak  konsumen,  maupun  pihak produsen  dan  penjual.  Prosesnya  juga  dapat dilakukan  secara  efisien  dalam  penghematan  biaya, waktu dan juga tenaga.
Jadi  dengan  adanya  peran E-Commerce dapat memudahkan  dan  meningkatkan  manajemen  serta pemasarannya, maka  penulis mengembangkan aplikasi website berbasis E-Commerce yang bertujuan membantu memperlancar penjualan produk yang ada di toko tersebut.
Berdasarkan  dari  latar  belakang  yang  telah dijelaskan  diatas,  maka  penulis  mengindentifikasi masalah  yang  ada  pada  Toko  Khayangan  Outdoor sebagai berikut : Kesulitan dalam menginformasikan produk terbaru karena kurangnya sarana promosi dan kurangnya  pemasaran  dalam  penjualan  pada  toko khayangan  outdoor  karena  hanya  sebatas  pada  area sekitar toko saja.
Dari  penelitian  sebelumnya,  Listianto,  Fauzi, Irviani, & Kasmi melakukan penelitian yang berjudul “Aplikasi  E-Commerce  Berbasis  Web  Mobile  Pada
Industri  Konveksi  Seragam  Drumband  Di  Pekon Klaten  Gadingrejo  Kabupaten  Pringsewu”.  Industri Konveksi  Seragam  Drumband  adalah  industri rumahan  yang  berada  di  Klaten  Gadingrejo Kabupaten  Pringsewu  yang  membuat  seragam drumband  untuk  menunjang  penampilan  ekskul drumband di sekolahan, penampilan 17 Agustus dan kompetisi  di  kabupaten  maupun  provinsi.  Sistem informasi  industri  konveksi,  promosi  seragam  dan transaksi  yang  manual  membuat  industri  konveksi tidak  diketahui  banyak  sekolah  dan  menyulitkan industri  konveksi  untuk  menjual  seragamnya  dan menyulitkan  mengetahui  desain  yang  ingin  dibuat sekolah,  ukuran  yang  akan  dibuat,  berapa  jumlah seragam  yang  dipesan,  penjualan  seragam,  promosi dan  pemasaran  masih  menggunakan  sistem  manual. Tujuan  dari  penelitian  penulis  membuat  rancangan aplikasi E-Commerce berbasis web. Teknik pengumpulan  datanya  yaitu  menggunakan  metode observasi, interview, dan pustaka. Metode pengembangan SDLC dilaksanakan dengan langkah- langkah  perencanaan,  analisis,  perancangan,  dan implementasi [2].

## 2. METODE PENELITIAN
Untuk  melakukan  penelitian  ini  penulis menggunakan metode penelitian sebagai berikut :
Gambar 1. Metode Penelitian
Berikut  gambar  1.  Metode  Penelitian  adalah merupakan penjelasan mengenai :

## 2.1  Kebutuhan
Untuk menentukan kebutuhanpeneliti menggunakan  teknik  wawancara  dilakukan  dengan cara  menyampaikan  sejumlah  pertanyaan  dari narasumber,  observasi  dan  studi  pustaka  untuk pengumpulan  data-data  yang  diperlukan  untuk meneliti  dan  membuat  BMC  ( Business  Model Canvas ).

## 2.2  Perancangan
Peneliti  dalam  tahapan  perancangan  sistem menggunakan tools  Unified  Modelling  Language (UML)  yang  terdiri  dari Activity  Diagram , Class Diagram , Sequence  Diagram ,  dan Use  Case Diagram .
2.3 1 Pemrograman Peneliti dalam tahapan pemrograman menggunakan  CMS  ( Content  Management  System ) dengan Wordpress untuk membuat program.

## 2.4  Pengujian
Peneliti  dalam tahapan pengujian  pada website menggunakan Black  Box ,  teknik  yang  akan digunakan untuk menguji fungsi dari sistem dan akan melihat hasil yang dihasilkan oleh sistem.

## 2.5  Implementasi
Sesudah  sistem  dilakukan  serangkaian testing memastikan sistem berjalan dengan baik, setelah itu menerapkan  sistem  yang  sudah  di  uji  kepada  Toko Khayangan Outdoor.
3. HASIL DAN PEMBAHASAN
3.1 Business Model Canvas
Business  Model  Canvas adalah  bahasa  yang sama  untuk  menggambarkan,  memvisualisasikan, menilai,  dan  mengubah  sebuah  rancangan  model bisnis  [3].  Dalam  mengembangkan  sistem E- Commerce peneliti menggunakan metodologi Business Model Canvas untuk menganalisa permasalahan  dan  kebutuhan  pada  toko  Khayangan
Outdoor.  Tujuan  dari  penelitian  adalah  untuk mengetahui  strategi  usaha  yang  tepat  dalam mengembangkan usaha khayangan outdoor menggunakan  sistem E-Commerce . Business  Model Canvas yang terjadi pada khayangan outdoor, seperti dibawah ini :
Gambar 2. Business Model Canvas
Berikut  penjelasan  mengenai  gambar  2. Business Model Canvas : a. Key Partners
Berisi  tentang  pihak  yang  berkerja  sama mensuplai  berbagai  macam  kebutuhan  dari  tempat usaha toko Khayangan Outdoor. Pihak yang berkerja samadengan  toko  khayangan  outdoor  yaitu  Merk Coszmet, Outdoor Sendal dan Outdoor Pro.

## b. Key Activities
Berisi  tentang  suatu  usaha  yang  menggunakan sumber-sumber  yang  dipunyai  untuk  diproduksi menjadi  produk/jasa.  Toko  Khayangan  Outdoor menjual berbagai macam keperluan mendaki gunung.

## c. Key Resources
Berisi  tentang  sumber  utama  dari  toko khayangan outdoor ini yaitu berupa toko fisik.

## d. Value Proposition
Merupakan inti dari nilai yang disuguhkan oleh toko  Khayangan  Outdoor  kepada  pelanggan  dengan menjual  alat-alat  mendaki  gunung  dengan  berbagai macam  merk  dengan  barang  yang  berkualitas,  serta cepat dan ramah dalam menanggapi pelayan.

## e. Customer Relationship
Berisi tentang media yang digunakan oleh toko Khayangan  Outdoor  untuk  memasarkan  produk  dan berinteraksi kepada pelanggan dengan cara mengadakan  pembelian  diatas  Rp  200.000,00 mendapatkan diskon 15%.
f. Channels
Berisi tentang sarana yang digunakan oleh toko Khayangan  Outdoor  untuk  sebuah  produk  bisa tersampaikan kepada pelanggan dengan menggunakan media sosial berupa whatsapp.
g. Customer  Segments
Tentang  tahap  penentuan  siapa  yang  akan menjadi target penjualan untuk memasarkan produk. Seperti komunitas pendakian dan pelanggan pendakian umum.

## h. Cost Structure
Merupakan  struktur  biaya  apa  saja  yang  akan dikeluarkan  oleh  toko  Khayangan  Outdoor  untuk memproduksi  suatu  produk  atau  jasa.  Seperti  biaya untuk sewa toko fisik, gaji karyawan dan pembelian alat-alat pendakian. i. Revenue Stream Berisi tentang toko khayangan outdoor mendapatkan  pendapatan  keuntungannya  dari  open trip.

## 3.1. Activity Diagram
Activity  Diagram adalah diagram yang digunakan untuk menggambarkan  alur aktivitas dari satu proses [4]. Berikut activity diagram usulan yang dibuat peneliti pada toko khayangan outdoor : a. Proses Pendaftaran
Setiap  pelanggan  yang  belum  mempunyai  akun pada website Khayangan  Outdoor  harus  mendaftar terlebih dahulu.
Gambar 3. Activity Diagram Proses Pendaftaran
Pada  gambar  3. Activity  Diagram Proses Pendaftaran  berisi  tentang  menjelaskan  mengenai cara pendaftaran pelanggan.
b. Proses Pemesanan Barang
Untuk  melakukan  pemesanan,  pelanggan  klik My  account lalu login terlebih  dahulu,  selanjutnya memilih produk yang ingin di beli, memilih size dan menentukan  jumlah  yang  ingin  di  beli.  Sehabis  itu mengklik  tombol add  to  cart .  Jika  pelanggan  ingin menambah  produk,  pelanggan  kembali  lagi  untuk memilih produk, jika tidak pelanggan selanjutnya ke proses checkout dan mengisi billing details , lalu klik place  order dan  sistem  akan  mengirim email ke pelanggan dan menyimpan data pemesanan barang.
Gambar 4. Activity Diagram Proses Pemesanan Barang
Pada  gambar  4. Activity  Diagram Proses Pemesanan  Barang  berisi  tentang  menjelaskan mengenai cara pelanggan memesan barang. b. Proses Konfirmasi Pembayaran Pelanggan melakukan pembayaran lalu mengklik Confirm  Payment selanjutnya  pilih  bank transfer dan pilih transfer date lalu mengisi transfer time . Pelanggan memasukkan bukti pembayaran yang sudah  dilakukan  dengan  cara  mengupload  bukti pembayaran  tersebut,  lalu  pelanggan  mengklik tombol submit .  Sistem  akan  menyimpan  data pembayaran.
Gambar 5. Activity Diagram Proses Konfirmasi Pembayaran
Pada  gambar  5. Activity  Diagram Proses Konfirmasi  Pembayaran  berisi  tentang  menjelaskan cara  pelanggan  membayar  barang  yang  sudah dipesan.
c. Proses Laporan
Setiap  bulannya  admin  akan  membuat  laporan penjualan, laporan potongan harga, laporan pemesanan,  laporan  pengiriman  barang  dan  laporan rekapitulasi, yang kemudian admin akan menyerahkan laporan tersebut ke pemilik toko.
Gambar 6. Activity Diagram Laporan
Pada gambar 6. Activity Diagram Laporan berisi tentang menjelaskan laporan yang dimiliki oleh toko Khayangan Outdoor.
d. Proses Tambah Produk
Admin login terlebih dahulu lalu mengklik products sehabis  itu  admin  memilih add  new dan mengisi  kolom add  new  product ,  jika  admin  sudah selesai  menambahkan  produk,  admin  mengklik tombol  terbitkan  dan  sistem  akan  meyimpan  data produk.
Gambar 7. Activity Diagram Tambah Produk
Pada  gambar  7. Activity  Diagram Tambah Produk  berisi  tentang  menjelaskan  mengenai  cara admin menambahkan produk.
e. Proses Tambah Kategori Admin login terlebih  dahulu  lalu  mengklik products sesudah  itu  admin  memilih categories lalu mengisi kolom add new category . Jika admin sudah selesai menambah kategori, admin mengklik tombol add  new  category dan  sistem  akan  meyimpan  data kategori.
Gambar 8. Activity Diagram Tambah Kategori
Pada  gambar  8. Activity  Diagram Tambah  Kategori berisi  tentang  menjelaskan  mengenai  cara  admin menambahkan kategori.
f. Proses Tambah Attribute
Admin login terlebih  dahulu  lalu  mengklik Products , selanjutnya admin memilih Attributes lalu mengisi kolom add new attribute . Jika admin  sudah selesai  klik  tombol add  attribute dan  sistem  akan menyimpan data attribute .
Pada  gambar  9. Activity  Diagram Tambah Attribute  berisi  tentang  menjelaskan  mengenai  cara admin menambahkan attribute.
g. Proses Tambah Coupon
Admin login terlebih  dahulu  lalu  mengklik WooCommerce sesudah itu admin memilih Coupons lalu  mengklik Add  coupon .  Selanjutnya  admin mengisi kolom coupon , jika sudah selesai admin klik terbitkan lalu istem akan meyimpan data.
Gambar 10. Activity Diagram Tambah Coupon
Pada  gambar  10. Activity  Diagram Tambah Coupon berisi  tentang  menjelaskan  mengenai  cara admin menambahkan kupon.
h. Proses Input Resi
Admin  login  terlebih  dahulu  lalu  mengklik WooCommerce sesudah  itu  admin  memilih orders dan  memilih  orderan  yang  ingin  di  input  resinya. Selanjutnya  admin  mengklik add  tracking info  lalu memilih  provider,  sesudah  itu  mengisi tracking number dan  terakhir  pilih date  shipped .  Jika  sudah selesai admin klik update lalu istem akan meyimpan data.
Pada  gambar  11. Activity  Diagram Input  Resi berisi  tentang  menjelaskan  mengenai  cara  admin untuk menginput resi.
3.2 Use Case Diagram
Use  Case  Diagram yaitu diagram yang digunakan  untuk  menggambarkan  hubungan  antara sistem  dengan  actor  [5].  Berikut  adalah Use  Case Diagram yang dibuat oleh peneliti :
a. Use case diagram master
Gambar 12. Use Case Diagram Master
Pada  gambar  12. Use  Case  Diagram  Master terdapat dua actor yaitu pelanggan dan admin. Pada actor pelanggan  dapat  melakukan  registrasi  dan login ,  pada actor admin  dapat  melakukan  input product , input categories dan input attributes .
b. Use Case Transaksi
Gambar 13. Use Case Diagram Transaksi
Pada gambar 13. Use Case Diagram Transaksi terdapat dua actor yaitu pelanggan dan admin. Pada actor pelanggan  dapat  melakukan entry pemesanan dan konfirmasi pembayaran, pada actor admin dapat melakukan validasi konfirmasi pembayaran, validasi pembayaran dan input resi.

## c. Use Case Laporan
Gambar 14. Use Case Diagram Laporan
Pada  gambar  14. Use  Case  Diagram Laporan terdapat  dua actor yaitu  admin  dan  pemilik.  Kedua actor sama-sama dapat mengakses ataupun mencetak laporan  seperti  laporan  penjualan,  laporan  potongan harga,  laporan  pemesanan,  laporan  pengiriman  dan laporan rekapitulasi.

## 3.3  Rancangan Basis Data
Rancangan  Basis  Data  yang  digunakan  oleh peneliti adalah Class Diagram , merupakan penggambaran  setiap  objek  atau  data  yang  terdapat pada sistem [6]. Berikut adalah Class Diagram yang dibuat oleh peneliti :
Gambar 15. Class Diagram
Pada gambar
15. Class Diagram menggambarkan  struktur  dan  deskripsi class serta dengan  hubungan  antara class yang  ada  pada  toko Khayangan Outdoor.
3.4  Struktur Tampilan (Menu) a. Front End
Berikut  ini  adalah  struktur  tampilan  menu pelanggan pada toko Khayangan Outdoor :
Gambar 16. Struktur Tampilan Menu Front End
Pada gambar 16. Struktur Tampilan Menu Front End menampilkan  menu  pelanggan,  pada  gambar terdapat  menu  beranda, shop yang  berisi product , cart , checkout , confirm payment dan my account .

## b. Back End
Berikut  ini  adalah  struktur  tampilan  menu admin pada toko Khayangan Outdoor :

## Gambar 17. Struktur Tampilan Menu  Back End
Pada gambar 17. Struktur Tampilan Menu Back End menampilkan menu admin, pada gambar terdapat menu  dashboard,  woocommerce  yang  berisi orders, coupon, export orders dan report , pada product berisi all  products,  categories dan attributes , confirm payment dan yith quick view .

## 3.5   Rancangan Layar
a. Menu Utama Berikut  ini  adalah  rancangan  layar  pada menu  pelanggan  ketika  berada  di website khayanganoutdoor.com :
Gambar 18. Menu Utama
Pada  gambar  18.  Menu  Utama  menampilkan menu  untuk  pelanggan  pada  toko  Khayangan Outdoor.
b. My Account
Berikut  ini  adalah  rancangan  layar  ketika pelanggan  ingin login yang  sudah  mempunyai akun pada toko khayangan outdoor dan register yang belum mempunyai akun :
Gambar 19. My Account
Pada  gambar  19.  My  Account  menampilkan menu pelanggan untuk register atau login .
c. Confirm Payment
Berikut  ini  adalah  rancangan  layar  dimana pelanggan ingin membayar pesanan yang sudah dipesan sebelumnya :
Gambar 20. Confirm Payment
Pada gambar 20. Confirm Payment menampilkan menu untuk pelanggan pada saat ingin membayar barang yang sudah di pesan.

## 3.6   Sequence Diagram
Sequence  diagram menjelaskan  secara  detail urutan  proses  yang  dilakukan  dalam  sistem  untuk mencapai tujuan dari use case interaksi  yang terjadi antar class , operasi apa saja yang terlibat, urutan antar operasi dan  informasi  yang diperlukan oleh  masing- masing  operasi.  Berikut sequence  diagram yang peneliti buat :
a. Sequence Registrasi
Gambar 21. Sequence Registrasi Pada gambar 21. Sequence Registrasi menggambarkan  tentang  proses  registrasi  pada pelanggan.
b. Sequence Entry Login
Gambar 22. Sequence Entry Login
Pada  gambar  22.  Sequence  Entry  Login menggambarkan tentang proses login.

## 4. KESIMPULAN
Setelah  penulis  menyelesaikan  penelitian  ini dan  membuat website  E-Commerce ,  maka  dapat diberikan  kesimpulan  sebagai  bagian  dari  laporan penelitian ini, yaitu:
a. Dengan dibuatkannya e-commerce ini pelanggan dapat mengetahui informasi produk- produk terbaru.
b. Dengan  adanya e-commerce ini  pemasaran dalam penjualan pada toko khayangan outdoor akan lebih luas.

## DAFTAR PUSTAKA
[1] Program  Studi  Akuntansi  FEB  Univ.  Ma  Chung, Studi Kasus Sistem Informasi Manajemen : Volume 2 , Dr.  Soetam  Rizky  Wicaksono,  Malang:  Seribu Bintang, 2018.
[2] F.  Listianto,  Fauzi,  R.  Irviani,  Kasmi,  Aplikasi  E- Commerce  Berbasis  Web  Mobile  Pada  Industri Konveksi  Seragam  Drumband  Di  Pekon  Klaten Gadingrejo  Kabupaten  Pringsewu, Aplikasi  E- Commerce  Berbasis  Web  Mobile  Pada  Industri Konveksi , vol. 8, pp. 146–152, Des. 2017.
[3] Yudho  Yudhanto, Information Technology Business Start-Up, Jakarta: PT Elex Media Komputindo, 2018.
[4] Sri  Mulyani, Metode  Analisis  Dan  Perancangan Sistem , ed. 2, Bandung: Abdi Sistematika, 2016.
[5] Sri  Mulyani,  dkk, Sistem  Informasi  Akuntansi: Aplikasi  Di  Sektor  Publik ,  Amilin  dan  Ali
Muktiyanto, Bandung: Unpad Press, 2018.
[6] Azminuddin  I.  S.  Azis,  Zohrahayaty,  Yasin  Aril Mustofa, Fundamental  Pemrograman ,  Yogyakarta:
Deepublish, 2019.