## PEMBUATAN E-COMMERCE PADA WARTEG VANS TAMAN PURING
Teguh Pangestu 1) , Hestya Patrie 2)
Sistem Informasi, Fakultas Teknologi Informasi, Universitas Budi Luhur Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260 E-mail: teguhpangestu96@gmail.com 1) , hestya.patrie@budiluhur.ac.id 2)

## Abstrak
Warteg Vans adalah toko sepatu yang bergerak dalam bidang penjualan yang berlokasi pada di Taman Puring Jl.  Kyai  Maja  Jakarta  Selatan  Blok  H/11.  Penulis  melakukan  analaisa  mengenai  system  penjualan  pada  toko Warteg Vans, dimana system yang sedang berjalan pada toko Warteg Vans masih belum menggunakan teknologi berbasis web, seperti melakukan penjualan sepatu, dan membuat laporan harian dan bulanan. Begitupun dengan pengolahan  data  yang  dihasilkan  dari  hasil  transaksi  penjualan  yang  masih  manual  dengan  tulisan  tangan, sehingga memungkinkan terjadinya kesalahan atau masalah seperti kekeliruan dalam penulisan dan perhitungan. Dengan adanya teknologi yang berkembang pekat saat ini, sangat memungkinkan untuk mendukung bisnis agar menjadi lebih berkembang dan maju. Hal ini menjadi peluang untuk manangani masalah-masalah yang terjadi pada Warteg Vans dengan merancang system penjualan berbasis web dengan memanfaatkan teknologi yang ada, diharapkan dapat  memberikan dampak positif  bagi  Warteg Vans. Sehingga  kegiatan  penjualan sepatu  menjadi lancar serta mampu bertahan dan bersaing dengan serupa yang ada pada saat ini. Penulis mengimplementasikan dengan  menggunakan  Microsoft  Visio  2013,  Balsamic  Mockup  dan  menggunakan  Database  PHPMyadmin. Penulis berharap dengan adanya rancangan sistem informasi penjualan sepatu berbasis web, dapat membantu mengatasi masalah-masalah yang sering terjadi pada Warteg Vans.
Kata kunci : penjualan, e-commerce, sepatu, berbasis web

## 1. PENDAHULUAN
Berdasarkan  hasil  yang  menguntungkan  yang dilakukan  pada  Warteg  Vans  merupakan  sebuah usaha fashion dan  semakin  berkembangnya  serta semakin  tingginya  kebutuhan  masyarakat  terhadap pelayanan  yang  berhubungan  dengan  kebutuhan fashion ,  maka  saya  sebagai  penulis  memutuskan untuk membuat e-commerce yang dimana produknya berdasarkan update-update fashion masa kini dan juga akan menyediakan layanan pemesanan untuk  para  konsumen (order) sehingga  konsumen bisa  menikmati  hasil  pesanannya  sesuai  keinginan. Permasalahan  pada  toko  Warteg  Vans  yaitu; Stok lama  yang  dimiliki  Warteg  Vans  terlihat  using sehingga,  pihak  toko  mengalami  kesulitan  untuk memasarkan  stok  lama,  kurangnya  informasi penjualan  sehingga,  tidak  diketahui  produk  yang terjual,  kurangnya  struktur  organisasi  yang  ada  di Warteg  Vans  menyebabkan  pelanggan  yang  telah membeli  produk  kesulitan  untuk  melakukan  retur dan  terkadang  penjual  salah  menulis  harga  di  nota penjualan  ( human  error )  sehingga  sering  kali perusahaan  mengalami  kerugian  dan  sulitnya pelanggan  membeli  produk  yangmereka  inginkan tidak ada toko Warteg Vans didaerahnya.
Ruang  lingkup  atau  batasan  pada  pembuatan,
analisa,  dan  rancangan e-commerce pada  Warteg Vans khusus untuk penjualan produk sepatu secara ritel  antara  lain  penginputan master produk, pendaftaran  pelanggan,  pengimputan  pemesanan, konfirmasi  pesanan,  pencetakan  laporan  pesanan, pencetakan  laporan  per  produk  dibeli,  pencetakan laporan  penjualan,  pencetakan  laporan  pelanggan
yang  bertransaksi,  dan  pencetakan  laporan  produk yang dibeli.
Tujuan  dan  Manfaat  penulisan  penelitian  ini yaitu  rancangan  sistem e-commerce untuk  Warteg Vans adalah sebagai pengembangan sistem penjualan  pada  Warteg  Vans,  karena  penjualan Warteg Vans saat ini menurun, dengan dirancangnya sebuah e-commerce dapat membuat penjualan pada Warteg  Vans  meningkat  dan  mempermudah  dalam pencarian  produk  yang  stoknya  masih  tersedia  dan mencari  produk  yang  akan  dikirim  kepada pelanggan.
Sistem  Informasi  adalah  cara-cara  yang diorganisasi  untuk  mengumpulkan,  memasukkan, dan mengolah serta menyimpan data, dan cara-cara yang  diorganisasi  untuk  menyimpan,  mengelola, mengendalikan, dan melaporkan informasi sedemikian  rupa  sehingga  sebuah  organisasi  dapat mencapai  tujuan  yang  telah  ditetapkan  [1]. Komponen-komponen dalam sistem informasi yaitu; (1)Meningkatkan  aksesibilitas  data  yang  tersaji secara tepat  waktu dan akurat bagi pada pengguna. (2)Menjamin  tersedianya  kualitas  dan  ketermpilan dalam  memanfaatkan sistem  informasi  secara kritis dan  (3)  Mengembangkan  proses  perencanaan  yang efektif.
Sedangkan  sistem  secara  sederhana  dapat  di definisikan  sebagai  kelompok  elemen  yang  saling berhubungan  atau  berinteraksi  hingga  membentuk satu  persatuan.  Konsep  umum  sistem  adalah sekelompok  komponen  yang  saling  berhubungan, bekerja  sama  untuk  mencapai  tujuan  bersama
dengan  menerima input serta  menghasilkan output dalam process transformasi yang teratur [2].
Sistem  informasi  mempunyai  8  (delapan) komponen atau disebut juga dengan blok bangunan ( building block) , yaitu:
1. Komponen Sistem (Component) Suatu  sistem  terdiri  dari  sejumlah  komponen yang saling berinteraksi, yang artinya saling bekerja sama  membentuk  suatu  kesatuan.  Komponen- komponen sistem atau elemen-elemen sistem dapat berupa  suatu  subsistem  atau  bagian-bagian  dari sistem.
2. Batasan Masalah (Boundry) Batas sistem merupakan daerah yang membatasi  antara  suatu  sistem  dengan  sistem lainnya atau dengan lingkungan luarnya.
3. Lingkungan Luar Sistem (Environment) Lingkungan  luar  dari  suatu  sistem  adalah apapun diluar batas dari sistem yang mempengaruhi operasi  sistem.  Lingkungan  luar  sistem  ini  dapat bersifat menguntungkan dan juga merugikan.
4. Penghubung Sistem (Interface)
Penghubung merupakan media yang menghubungkan  antara  satu  subsistem  dengan subsistem  yang  lainnya.  Keluaran  dari  satu subsistem  akan  menjadi  masukan  untuk  subsistem lainnya melalui penghubung.
5. Keluaran Sistem (Output)
Keluaran sistem adalah energi yang diolah dan diklasifikasikan  menjadi  keluaran  yang  berguna. Keluaran dapat merupakan masukan untuk subsistem yang lain. 6. Masukan Sistem (Input) Masukan sistem adalah energi yang dimasukkan ke dalam sistem. Masukan dapat berupa masukan perawatan dan masukan sinyal. Maintenance  input  adalah  energi  yang  dimasukkan supaya sistem tersebut dapat berjalan. 7. Pengolahan Sistem (Process)
Suatu  sistem  dapat  mempunyai  suatu  bagian pengolah atau sistem itu sendiri sebagai pengolahnya.  Pengolah  yang  akan  merubah masukan menjadi keluaran.
8. Sasaran Sistem ( Objective atau Goal )
Suatu  sistem  pasti  mempunyai  tujuan  atau sasaran, kalau sistem tidak mempunyai sasaran maka sistem  tidak  akan  ada.  Suatu  sistem  dikatakan berhasil  bila  mengenai  sasaran  atau  tujuannya. Sasaran  sangat  berpengaruh  pada  masukan  dan keluaran yang dihasilkan.
Business  Model  Canvas suatu  kerangka- kerangka kerja yang membahas model bisnis dengan disajikan  dalam  bentuk  visual  berupa  kanvas lukisan, agar dapat dimengerti dan dipahami dengan mudah.  Model  ini  digunakan  untuk  menjelaskan, memvisualkan, menilai dan mengubah suatu model bisnis, agar mampu menghasilkan kinerja yang lebih optimal [3].
SEO  adalah  teknik  yang  digunakan  agar website  dapat  dikenal  dengan  mudah  oleh  mesin pencari  sehingga  dapat  meningkatkan  pengunjung website, terdapat 2 macam teknik SEO yaitu SEO on page dan SEO off page. SEO on page adalah teknik- teknik  yang  digunakan  pada  halaman  website dengan  cara  memodifikasi  bagianbagian  website seperti content, link, tag, kata kunci [4].
Pengertian  Marketing  adalah  suatu rangkaian kegiatan yang bertujuan untuk memasarkan produk, baik barang ataupun jasa, dengan berbagai cara agar produk  tersebut  disukai  dan  digunakan  oleh khalayak luas.
MySQL merupakan database  server yang paling  sering  digunakan  dalam  pemograman PHP. MySQL digunakan untuk menyimpan data di dalam database dan memanipulasi data-data yang diperlukan.  Manipulasi  data  tersebut  berupa menambah,  mengubah,  dan  menghapus  data  yang berada dalam database [5].

## 2. METODOLOGI PENELITIAN
2.1 Kerangka Kerja Penelitian Untuk membantu dalam penyusunan penelitian ini,  maka  perlu  adanya  susunan  kerangka  kerja ( Framework ) yang jelas tahapan-tahapannya. Kerangka  kerja  ini  merupakan  langkah-langakah yang  akan  diakukan  dalam  penyelesaian  masalah yang  akan  dibahas.  Adapun  kerangka  kerja penelitian yang digunakan seperti yang terlihat pada gambar 1.

## Gambar 1. Kerangka Kerja Penelitian
Pembahasan masing-masing  tahap  dalam penelitian adalah sebagai berikut:
a. Studi Literatur Mencari  teori  dari internet ,  buku  dan  jurnal referensi jurnal.
b. Pengumpulan Data Tools yang digunakan:
1) Observasi
2) Wawancara
c. Teknik Analisa Data
Untuk menganalisa data menggunakan:
1) Activity Diagram
2) Use Case Diagram
3) Business Model Canvas
4) Sequence Diagram
d. Perancangan Sistem
Tools yang digunakan:
1) PHP 2) CSS 3) Xampp 4) My Sql
5) Java Script
6) HTML (Hyper Text Markup Language)
e. Uji Coba Program ( testing )
Pengujian  ini dilakukan untuk mengetahui apakah software yang di buat telah sesuai dengan desainnya dan apakah  masih terdapat  kesalahan atau tidak.

## 2.2 Metode Pengumpulan Data
Adapun  metode  yang  digunakan  dalam pengumpulan data adalah sebagai berikut:
1. Observasi,  Penulis  melakukan  pengamatan langsung  terhadap  proses  bisnis  yang  sedang berjalan pada Warteg Vans.
2. Wawancara,  Pengumpulan  data  dilakukan dengan  cara  bertatap  muka  langsung  dengan mengajukan  beberapa  pertanyaan-pertanyaan mengenai  proses  bisnis  yang    sedang  berjalan kepada karyawan Warteg Vans.
2.3 Bussines Model Canvas (BMC) Dalam  penelitian  ini  Metode Business  Model Canvas  (BMC)  dipilih  menjadi  metode  analisis model  pengembangan  bisnis.  BMC adalah  sebuah strategi dalam manajemen yang berupa visual chart yang  terdiri  dari  9  blok  yang  masing-masing  blok saling  berhubungan  satu  sama  lain.  Blok-blok terebut diantaranya adalah Customer Segment, Value Proposition,  Channel,  Customer  Relationship, Revenue Streams, Key Activities, Key Resource, Key Partners, dan Cost Structure . [3]
4. HASIL DAN PEMBAHASAN
4.1. Business Model Canvas Gambar 2 adalah isi dari Canvas Bisnis Model untuk Warteg Vans yang akan dibangun.
Gambar 2. Business Model Canvas
Berikut  9  blok  secara  detail  yang  dipetakan  untuk Warteg Vans:
a. Key Partners
Key  Partners Warteg  Vans  adalah  pabrik pengolahan sepatu yang mengerjakan semua produk yang  ada  di  toko  Warteg  Vans  dari  produk  model lama sampai produk model terbaru.
b. Key Activities
Key Activities Warteg Vans adalah Production yang  akan  memproduksi  sepatu  untuk fashion dengan  desain-desain  terbaru  dan  menarik  yang khusus untuk dikalangan  mahasiswa, anak sekolah, dan pecinta sepatu.
c. Value Propositions
Value  Propositions Warteg  Vans  adalah memberikan kemudahan dan  mengenalkan produk- produk  terbaru  tentang  sepatu  khususnya  sepatu Vans.
d. Customer Relationship
Customer  Relationship Warteg  Vans  adalah sebagai berikut :
1) Transactional : bisa beli langsung datang ke toko maupun  media  social  dan WebSite yang  sudah disediakan.
2) Long-term : menjalin hubungan kepada reseller- reseller sepatu  lain  dengan  cara  membrikan harga sesuai bagi para reseller tersebut.
e. Customer Segments
Customer  segments Warteg  Vans  sebagai berikut:
1) Mahasiswa
2) Komunitas Pecinta Sepatu
3) Anak Muda.
f. Key Resources Key Resources Warteg Vans sebagai berikut :
1) Tenaga yang meliputi : karyawan, kurir.
2) Alat yang meliputi : komputer, smartphone.
g. Channel Channel Warteg  Vans  adalah  menggunakan social  media  seperti,  Instagram,  Facebook,  Twitter untuk mempopulerkan toko Warteg Vans.
h. Cost Structure
Cost  Structure Warteg  Vans  adalah  biaya  gaji karyawan, internet.
i. Revenue Stream
Revenue  Stream dari  Warteg  Vans  adalah keuntungan dari  hasil penjualan produk dan titipan barang  yang  di  toko  maupun  di WebSite Warteg Vans.
4.2. Proses Bisnis Sistem Usulan
a. Proses Pembelian Produk Melalui Toko
Gambar 3. Proses Pembelian Produk Melalui Toko
Gambar  3 proses  pembelian  produk  melalui  toko Warteg Vans.
b. Proses Pembelian Produk Melalui WebShop
Gambar 4. Proses Pembelian Produk Melaui Webshop
Pada  gambar  4  menggambarkan  proses  pembelian produk melalui WebShop.

## 4.3. Aturan Bisnis
Adapun aturan bisnis di Warteg Vans adalah:
1. Proses  pembayaran  paling  lambat  1x24  jam terhitung  sejak  pelanggan  tersebut  melakukan pemesanan melalui online.
2. Toko Warteg Vans tidak menerima refund.
4.4. Perancangan Sistem
a. Use Case Diagram
1) Use Case package diagram
Gambar 5. Use Case Package Diagram
Pada  Gambar  5  tampilan Use  Case  Package Diagram .
2) Usa Case Package Diagram Akun
Gambar 6. Use Case Diagram Package Akun
Pada gambar 6 tampilan menu dari sisi pelanggan, staff , dan visitor .
3) Use Case Package Diagram Master
Pada gambar 7 tampilan menu master dari sisi staff .
4) Use Case diagram package WebShop
Gambar 8. Use Case Diagram Package WebShop
Pada  gambar  8  tampilan  menu  WebShop  dari  sisi visitor dan pelanggan.
5) Use Case diagram package Pesanan
Gambar 9. Use Case Diagram Package Pesanan
Pada  gambar  9  tampilan  menu  pesanan  dari  sisi pelanggan dan staff.
6) Use Case Diagram Package Laporan
Gambar 10. Use Case Diagram Package Laporan
Pada  gambar  10  tampilan  menu  laporan  yang  akan dibuat oleh staff.

## 4.5 Class Diagram
Gambar 11. Class Diagram

## 4.6 Struktur Tampilan Menu
Gambar 12. Struktur Tampilan Menu
Pada gambar 12 menggambarkan Struktur tampilan menu.

## 4.7 Rancangan layar
1) Rancangan Layar Halaman Login Admin
Gambar 12 merupakan rancangan layar login untuk admin.
2) Rancangan Layar Login Pelanggan
Gambar 13. Rancangan layer login pelanggan
Gambar 13 merupakan rancangan layer login untuk pelanggan.

## 3) Rancangan Layar Home Pelanggan

## Gambar 14 Rancangan layar home pelanggan
Gambar  14  merupakan  rancangan  layar  home pelanggan untuk mencari produk.

## 4) Rancangan Layar Data Pesanan
Gambar 15. Rancangan Layar Halaman Data Pesanan
Gambar  15  merupakan  rancangan  layar  pada halaman pesanan pelanggan.
4.8 Sequence Diagram
a. Sequence Diagram Login Admin
Gambar 16. Sequence Diagram Login Admin
Gambar  16  adalah  gambar  alur  program pada halaman login admin.
b. Sequence Diagram Kelola Pelanggan
Gambar 17. Sequence Kelola Pelanggan .
Gambar  17  adalah  gambar  alur  program pada halaman kelola pelanggan.
3) Sequence Diagram Kelola Brand
Gambar 18. Sequence Kelola Brand.
Ganbar  18  adalah  gambar  alur  program  pada halaman kelola data brand.
4) Sequence Diagram Kelola Data Produk
Gambar 19. Sequence Diagram Kelola Data Produk
Gambar  19  adalah  gambar  alur  program pada halaman kelola data produk.
5) Sequence Diagram Kelola Pesanan
Gambar 20. Sequence Diagram Kelola Pesnaan
Gambar  20  adalah  gambar  alur  program  kelola pesanan.
6) Sequence Diagram Konfirmasi Pembayaran
Gambar 21. Sequence Diagram Konfirmasi Pembayaran .
Gambar 21 adalah gambar alur program konfirmasi pembayaran.

## 5. KESIMPULAN
Dari  uraian  diatas  penelitian ini  dapat disimpulkan sebagai berikut;
Dengan  adanya  penerapan  sistem  ini  semua transaksi  pemesanan  dan  pembayaran  lebih  efisien dan data  menjadi  lebih akurat, dengan adanya  fitur laporan  stok  produk  memudahkan  penjual  untuk mengetahui  sisa  produk  yang  telah  terjual  dan dengan  adanya  fitur  laporan  pesanan  memudahkan penjual untuk mengetahui seberapa banyak pesanan yang telah dipesan oleh pelanggan.

## DAFTAR PUSTAKA
[1] Krismiaji, “Sistem Informasi
Akuntansi”,
Yogyakarta: Unit Penerbit, 2015.
[2] Anggoro, Dani. et al , “Rancangan Sistem Informasi Koperasi  Simpan  Pinjam  Guru  dan  Pegawai”,
Seminar  Nasional  Teknologi  Informasi  dan Komunikasi (SENTIKA 2015) Atmajaya Yogyakarta, 28 Maret 2015, pp. 213–222.
[3] Pramudita, A. S., “Formulasi Model Bisnis Hostel di Bandung  dengan  Pendekatan  Value  Chain  dan Business  Model  Canvas  (Studi  Kasus :  Pinisi Backpacker)”, ISEI Business and Management , Vol.
2, no.1, pp. 32–38, Maret 2018.
[4] Hayaty, Mardhiya and Meylasari, Dwi.,
“Implementasi  Website  Berbasis  Search  Engine Optimization  (SEO)  Sebagai  Media  Promosi”,
Jurnal  Informatika ,  Vol.5,  no.2,  pp.295–300, September 2018.
[5] Supriyatna, Tatang and Suwarni, “Perancangan Dan Implementasi Sistem Informasi Pemantauan
Perkembangan  Anak  Berkebutuhan  Khusus  Pada Sekolah  Luar  Biasa  Abdi  Pratama”, Jurnal Teknologi Informasi , vol. 5, no. 2, Desember 2017.