## Implementasi Metode Prototype dalam Membangun Sistem Informasi Penjualan Online pada Toko Herbal Pahlawan
Achmad Zuhri Al Muhtadi 1) , Lukman Junaedi 2)
Sistem Informasi, Fakultas Ilmu Komputer, Universitas Narotama Surabaya, Jl. Arif Rahman Hakim No.51, Surabaya, 60117, Indonesia azuhri150@gmail.com

## Abstrak
Berkembangnya  media  informasi  pada  era  teknologi  saat  ini,  era  digital  mempunyai  peran  penting dalam menunjang aktivitas. Salah satu perilaku yang menjadi trend pada kalangan masyarakat saat ini adalah belanja online melalui E-Commerce, sehingga menjadikan E-Commerce sebagai sarana untuk mempermudah transaksi jual beli dari segi tenaga, biaya, dan waktu yang telah ditentukan. Tujuan dari penelitian ini adalah untuk membangun sistem informasi penjualan secara  online pada Toko Herbal Pahlawan  supaya  memperluas  jangkuan  pemasaran  produknya.  Metode  yang  digunakan  dalam penelitian ini adalah prototype dan dirancang menggunakan unified modelling language (UML) dan aplikasi pencil versi 3.0.4 sebagai desain interface. Pembuatan website menggunakan pemrograman Hypertext  Preprocessor  (PHP),  Framework  Codeigniter  dan  MySql  sebagai  database  untuk penyimpanan  data.  Hasil  pengujian  sistem  tersebut  menggunakan  metode  blackbox.  Output  dari penelitian  ini  adalah  aplikasi  penjualan  online  berbasis  website  pada  Toko  Herbal  Pahlawan  yang menyediakan  fitur  stok  barang,  laporan  stok  barang,  laporan  penjualan,  melakukan  transaksi, mengelola data produk.
Kata kunci: E-Commerce, Prototype, UML, MySql, Codeigniter

## 1. Pendahuluan (Introduction)
Maraknya media informasi pada era teknologi saat ini, era digital mempunyai peran penting dalam menunjang aktivitas. Teknologi informasi mampu memberikan efektifitas dan keakuratan yang dapat mengorganisir data perusahaan baik dalam jumlah besar serta membantu perusahaan dalam mengambil keputusan dan strategi didalam kebijakan perusahaan (Indrayani, 2012). Sistem informasi saat ini dapat memberikan  kontribusi  terhadap  kebutuhan  perusahaan  untuk  membangun  suatu  keunggulan  yang kompetitif. Salah satunya bisnis yang menjadi trend pada kalangan masyarakat saat ini adalah belanja online  atau E-Commerce .  Trend  ini  akan  memberikan  kemudahan  hingga  menjadikan E-Commerce sebagai  cara  perdagangan  yang  lebih  mempermudah  dari  segi  tenaga,  biaya  dan  waktu  yang  telah ditentukan.  Hal  ini  dapat  kita  dilihat  dengan  persaingan  yang  semakin  ketat  di  tiap-tiap  perusahaan berusaha meningkatkan kualitasnya agar dapat memenuhi kebutuhan untuk bersaing di dunia bisnis serta demi tercapainya tujuan perusahaan.
Toko  Herbal  Pahlawan adalah  sebuah  toko  yang  bergerak  dalam  bidang  penjualan  dan  jasa kesehatan  yang  melayani  penjualan  obat-obatan  herbal.  Transaksi  yang  digunakan  oleh  Toko  Herbal Pahlawan menggunakan  sistem  penjualam  secara offline dan  pembayaranya  dilakukan  secara  tunai. Selain itu Toko Herbal Pahlawan belum berkembang dalam mengelola toko sehingga Branding kurang dilakukan untuk memperluas jangkauan pemasaran. Toko Herbal Pahlawan sudah menerapkan Visual Branding dengan cara membuat Logo toko, namun Toko Herbal Pahlawan belum melakukan Digital Branding .  Salah  satu Branding  Digital yang  paling  umum  dilakukan  adalah  menggunakan Website . Selain sebagai media dalam melakukan Branding , website juga bisa digunakan sebagai sarana dalam melakukan pemasaran produk (Rahmadhani, 2017).
Dalam kasus ini Owner atau pemilik toko memiliki kebutuhan akan sebuah sistem yang dapat digunakan  untuk  memasarkan  produknya,  akan  tetapi  mempunyai  keterbatasan  yang  tidak dimilikinya  seperti  sistem  informasi  untuk membantu penjualan  Toko  Herbal  Pahlawan  dalam melakukan penjulan obat-obatan herbal .
Hal ini perlu dibuat sebuah acuan dari sistem yang akan dibangun. Penulis akan membangun sebuah sistem informasi penjualan dengan metode prototype . Metode prototype diharapkan dapat memudahkan pengguna dalam memilih sistem yang sesuai dari apa yang telah diharapkan oleh pengguna.
Untuk  mendukung  penelitian  telah  dianalisa  beberapa  penelitian  yang  berkaitan  dengan penelitian ini, yaitu:
1. Penelitian dari Hidayat, Marlina and Utami (2017) pada Jurnal Simnasiptek yang berjudul “Perancangan  sistem  informasi  penjualan  barang  handmade  berbasis  website  dengan metode waterfall”. Penelitian ini memiliki persamaan dalam hal penjualan namun terdapat perbedaan  pada  metode  yang  digunakan  yaitu  menggunakan waterfall .  Hasil  yang didapatkan  pada output penelitian  ini  adalah  adanya  sistem  penjualan  barang  handmade berupa website yang bertujuan untuk mengurangi biaya pemasaran produk.
2. Penelitian dari Rahmawati and Mulyono (2016) pada Jurnal Manajemen Sistem Informasi 2016 yang berjudul “Analisa dan perancangan sistem informasi pemasaran berbasis web pada  Toko  Billy”.  Penelitian  ini  mempunyai  persamaan  dalam  metode  yang  digunakan yaitu menggunakan metode Prototype , namun memiliki perbedaan pada sistem yang dibuat yaitu sistem pemasaran. Hasil yang didapat pada penelitian ini adalah output website untuk mengolah sistem pemasaran pada toko billy yang mempermudah dalam penyimpanan data dengan memanfaatkan sistem teknologi informasi.
3. Penelitian dari Susanti (2016) pada Jurnal Informatika yang berjudul “Perancangan Sistem Informasi  Akademik  berbasis  web  pada  SMK  Pasar  Minggu  Jakarta”.  Penelitian  ini memiliki persamaan pada sistem yang berbasis website , namun berbeda pada metode yang digunakan  yaitu waterfall .  Hasil  penelitian  yang  didapatkan  yaitu  output website yang mempermudah  siswa  dan  orangtua  dalam  mengakses  informasi  tanpa  harus  datang  ke sekolah.

## 2. Metode Penelitian (Methods)
Pada  penelitian ini meggunakan metode Prototype dikarenakan  mempunyai  fungsi  sebagai versi  awal  dari  sistem.  Metode Prototype akan  menghasilkan  sistem  sebagai  perantara  antara Developer dan User karena dapat memudahkan User dalam memilih sistem yang sesuai dari apa yang diharapkan Pembuatan model software yang sederhana dengan penggambaran dasar yang digunakan untuk dijadikan rancangan merupakan pengertian dari prototype (Priyambudi, 2017). Metodologi prototype ada empat, yaitu :
1. Illustrative
Memberikan output contoh laporan dan tampilan layer
2. Simulated
Menampilkan simulasi alur sistem tetapi tidak menggunakan data yang nyata.
3. Functional
Menampilkan simulasi alur sistem tetapi dengan menggunakan data yang nyata.
4. Evolutionary
Memberikan output yang telah dijadikan output bagian dari operasional sistem.

## 2.1 Workshop Prototype
Tujuan menggunakan metode prototype adalah megumpulkan data informasi dari pengguna sehingga pembuatan sistem dapat memperhatikan keluhan pada pengguna. Pembangunan sistem
informasi ini meliputi yaitu perancangan proses prototype , perancangan basis data ( database ) dan antarmuka (desain  interface ).  Adapun  Tahapan  dalam  proses Prototyping yang  telah digambarkan  pada  Gambar  1,  meliputi  Pengumpulan  Kebutuhan,  Membangun  Prototyping, Evaluasi  Prototyping,  Mengkodekan  Sistem,  Menguji  Sistem,  Evaluasi  Sistem,  Penggunaan Sistem.
Gambar 1. Alur Prototype

## 2.2 Konsep dasar penjualan.
Penjualan merupakan suatu kegiatan terpadu yang bertujuan untuk pengembangan usaha dan memenuhi kebutuhan konsumen, memperoleh laba dan sebagai pemuas kebutuhan. Penjualan dalam sistem informasi meliliki prosedur meliputi diterima pesanan dari pembeli, pengecekan barang, pengadaan faktur, pencatatan, dan penjualan (Kristanto, 2018).

## 3. Hasil dan Pembahasan (Results and Discussions)
Dalam melakukan pengembangan sistem saat ini dibutuhkan sebuah analisis dan desain sistem atau perancangan untuk dapat mengelola data penjualan dengan tepat, cepat, dan benar. Sedangkan dalam  perancangan  atau  desain  sistem  merupakan  bagian  yang  harus  ditempuh  untuk  menyajikan sistem agar dapat berjalan atau terorganisir dengan baik dan benar.

## 3.1 Analisis Kebutuhan
Pada analisis sistem di Herbal Pahlawan ada tiga tahap yang terdiri dari survei, permasalahan, pemecahan masalah.

## 3.1.1 Survei
Survei  dilakukan di  Toko Herbal  Pahlawan  yang  dimana  peneliti meminta  informasi mengenai prosedur penjualan dan pencatatan laporan, survei juga meliputi penelitian terhadap kondisi cara transaksi yang dilakukan oleh pemilik toko dalam melayani pelanggannya di Toko Herbal Pahlawan.

## 3.1.2 Permasalahan yang dihadapi Toko Herbal Pahlawan
Dalam  melakukan  penjualan  Herbal  Pahlawan  masih  secara offline dan  dari  segi pencatatan  laporan  Herbal  Pahlawan  masih  menggunakan  cara  yang  lama  yaitu  sistem pencatatan melalui buku yang dimana buku tersebut dapat hilang atau terjadi hal-hal lainnya yang tidak diinginkan.

## 3.1.3 Pemacahan Masalah
Dengan  permasalahan  yang  ada  dapat  di  selesaikan  atau  diatasi  dengan  pembuatan sistem informasi penjualan. Jadi setiap ada pesanan yang masuk, dan laporan penjualan setelah melakukan transaksi dapat tercatat otomatis di database .

## 3.2 Perancangan Sistem Menggunakan UML (Unified Modeling  Language)
Dalam  pengerjaan  pembangunan  Sistem  Informasi  penjualan  online  pada  Toko  Herbal Pahlawan kita perlu merancang suatu sistem dengan membentuk arsitektur dengan memakai UML ( Unified Modeling  Language ). Unified ModelingLanguage (UML) bukanlah merupakan bahasa pemprograman tetapi modelmodel yang tercipta berhubungan langsung dengan berbagai macam bahasa  pemprograman,  sehingga  memungkinkan  melakukan  pemetaan  ( mapping )  langsung  dari model-model  yang  dibuat  dengan Unified  Modeling  Language (UML)  dengan  bahasa Pemrograman berorientasi objek (Dharwiyanti and Wahono, 2003).

## 3.2.1 Usecase Diagram
Usecase Diagram merupakan gambaran interaksi antara sistem dengan sistem pengguna (Pengetahuan and Komputer, 2018).
Gambar 2. Usecase Diagram

## 3.2.2 Activity Diagram
Activity Diagram  merupakan  gambaran workflow (aliran  kerja)  atau  penggambaran aktivitas    sistem  proses  bisnis  (Hendini,  2016).  Adapun Activity  Diagram  Login  Admin dan Pemesanan  dan  Pembayaran dalam  penjualan online pada  Toko  Herbal  Pahlawan sebagai berikut:
uc Uc. Toko Online Si stem Berj al an Customer Admin Kepala Toko Melihat Produk Memilih Produk Transfers Pembayaran Konfirmasi Pembayaran Login Admin Mengelola Pesanan Mengkonfirmasi Pesanan Terima dan Proses Pesanan Masuk Tolak dan Hapus Pesanan Login Admin Mengelola Data Produk Menerima Laporan Penj ualan «extend» «extend»
Gambar 3. Activity Diagram pada Halaman Login Admin
Gambar 4. Activity Diagram Pemesanan dan Pembayaran 3.2.3 Sequence Diagram
Sequence Diagram merupakan gambaran interaksi yang terjadi antar objek di dalam maupun disekitar  sistem,  berupa  pesan yang  digambarkan  (Hendini,  2016).  Adapun Sequence  Diagram dalam penjualan online pada Toko Herbal Pahlawan sebagai berikut:
act Login Admin dan Kepala Toko Admin dan Kepala Toko Website Mulai Menampilkan Halaman Login Mengisi Username dan Passw ord Apakah Sudah Benar? Menampilkan Halaman Dashboard Selesai [iya] [tidak] act Pemesanan dan Pembayaran Website Admin Customer Mulai Memilih Produk Dibeli Menampilkan Halaman Utama Menerima Info Produk Kosong Melakukan Pembayaran Mengisi Data Customer dan Memilih Pengiriman Mentransfers Pemabayaran Melalui Rekening Verifikasi Whatsapp Menampilkan Info Produk Menampilkan Halaman Pembayaran Menampilkan Halaman Form Customer dan Memilih Pengiriman Menampilkan Halaman Verifikasi Pembayaran Mengecek Ketersediaan Produk Apakah Sudah Lengkap? Menerima Verifikasi Selesai [tidak] [iya] [tidak] [iya]
Gambar 5. Sequence Diagram Login Admin
Gambar 6. Sequence Diagram Pemesanan

## sd Login Admin
Admin dan Kepala Toko
Login
Control Login Data Sistem Halaman Utama Mengisi Username() Mengisi Password() Cek Validasi() Username dan Password Salah() Menampilkan Halaman Utama() sd Sequence Pemesanan
Customer Halaman Utama
Menampilkan Informasi
Data Sistem Proses Pemesanan Memilih Produk yang dibeli() Menampilkan Info Produk() Ketersediaan Produk() Pilih Produk yang di Pesan()
Simpan Pesanan()

## Gambar 7. Sequence Diagram Pembayaran

## 3.3 Implementasi
Tahap ini merupakan kegiatan final dari pembuatan rancangan sistem informasi penjualan online berbasis website dengan  menggunakan  perangkat  lunak  maupun  perangkat  keras.  Terdapat  beberapa halaman tampilan dalam website Toko Herbal Pahlawan yang akan ditampilkan sebagi berikut:
a. Halaman Login

## sd Sequence Pembayaran
Customer Halaman Pembayaran Menampilkan Informasi Proses Pembayaran Data Admin Melakukan Pembayaran() Menampilkan Form dan Memilih Pengiriman() Mengisi data dan Memilih Pengiriman() Menampilkan Halaman Verifikasi Pembayaran() Mentransfers Pembayaran Melalui Rekening() Verifikasi Whatsapp() Menerima Verifikasi()
b. Halaman Utama
Gambar 9. Tampilan pada Halaman Utama

## c. Halaman Dashboard
Gambar 10. Tampilan pada Halaman Dashboard
d. Halaman Kategori Produk
Gambar 11. Tampilan pada Halaman Kategori Produk
e. Halaman Produk
Gambar 12. Tampilan pada Halaman Produk

## 3.4   Pengujian Black Box Testing
Tabel 1. Hasil pada Pengujian Black Box Aktivasi Pengujian Realisasi yang diharapkan Hasil Klik Menu Login Muncul tampilan halaman Dashboard Sukses Klik Menu Beranda Muncul  Tampilan  Halaman Beranda Sukses Klik Menu Kategori Muncul  Tampilan  Halaman Kategori Produk Sukses Klik Menu Testimoni Muncul  Tampilan  Halaman Testimoni Sukses Klik Menu Tentang Muncul  Tampilan  Halaman Tentang Sukses Klik Menu Kontak Muncul  Tampilan  Halaman Kontak Sukses Klik Menu Beli Muncul  Tampilan  Halaman Beli Sukses Klik Menu Tambah Keranjang Muncul  Tampilan  Halaman Keranjang Sukses Klik Menu Lanjut Pembayaran Muncul  Tampilan  Halaman Pembayaran Sukses Klik Menu Kosongkan Troli Muncul  Tampilan  Halaman  K eranjang telah Kosong Sukses Klik Menu Bayar Sekarang Muncul  Tampilan  Halaman Verifikasi Pembayaran Sukses Klik Menu Klik disini Muncul  Tampilan  Halaman Konfirmasi Pembayaran melalui Whatsapp Sukses
Klik Menu Pesanan Muncul  Tampilan  Halaman data Pesanan Sukses Klik Menu Kirim Email Muncul Halaman Email Sukses Tabel 1. Hasil pada Pengujian Black Box (Lanjutan) Aktivasi Pengujian Realisasi yang diharapkan Hasil Klik menu kategori Muncul tampilan data kategori Sukses Klik menu produk Muncul tampilan data produk Sukses Klik menu promo Muncul  tampilan  data  promo produk Sukses Klik menu testimoni Muncul tampilan data testimoni Sukses Klik menu halaman Muncul tampilan data halaman Sukses Klik menu pengaturan Muncul tampilan data pengaturan Sukses Klik menu batal Muncul  tampilan  halaman  data produk Sukses Klik menu pilih file Muncul tampilan halaman manajemen file pada perangkat Sukses Klik menu unggah produk Muncul tampilan halaman produk Sukses Klik menu batal Muncul  tampilan  halaman  data produk Sukses Klik menu pilih file Muncul tampilan halaman manajemen file pada perangkat Sukses Klik menu edit produk Muncul  tampilan  halaman  data produk Sukses Klik  menu  “oke”  pada yakin  ingin  menghapus produk Muncul tampilan produk berhasil dihapus Sukses

## 4. Kesimpulan (Conclusion)
Dari  hasil  pembahasan  sistem  informasi  penjualan online berbasis website pada  Toko  Herbal Pahlawan dapat ditarik sebuah kesimpulan yaitu, hasil output pengujian sistem menggunakan metode pengujian Black  Box adalah  menunjukkan  hasil  sistem  secara  keseluruhan  berhasil  (Sukses),  hal  ini menunjukkan  sistem  siap  digunakan.  Sistem  Informasi  penjualan online berbasis website dapat dijadikan media penjualan oleh Toko Herbal Pahlawan. Serta dapat memberikan keuntungan dalam hal pemasaran dan pelanggan bisa mendapatkan info produk-produknya secara cepat, tepat, dan akurat.
Sistem Informasi penjualan online berbasis website dapat menyimpan data dan laporan penjualan serta memproses penjualan dan pembayaran secara otomatis.

## Ucapan Terima Kasih (Acknowledgement)
Pada kesempatan ini peneliti sangat banyak berterimakasih kepada Bapak Lukman Junaedi selaku pembimbing yang telah banyak memberikan masukan ataupun komentar agar penulisan ini menjadi baik dan rapi. Selain itu peneliti juga berterima kasih kepada Bapak Gustiandi selaku pemilik Toko Herbal Pahlawan yang telah memberikan izin untuk melakukan penelitian ditempat Beliau.

## Daftar Pustaka
Dharwiyanti,  S.  And  Wahono,  R.  S.  (2003)  ‘Pengantar  Unified  Modeling  Language  (UML)’,
Ilmukomputer.Com .
Hendini,  A.  (2016)  ‘Pemodelan  UML  Sistem  Informasi  Monitoring  Penjualan  Dan  Stok  Barang’, Pemodelan Uml Sistem Informasi Monitoring Penjualan Dan Stok Barang (Studi Kasus: Distro Zhezha Pontianak) . Doi: 10.2135/Cropsci1983.0011183x002300020002x.
Hidayat, R., Marlina, S. And Utami, L. D. (2017) ‘Perancangan Sistem Informasi Penjualan Barang Handmade Berbasis Website Dengan Metode Waterfall’, Simnasiptek 2017 .
Indrayani,  H.  (2012)  ‘PENERAPAN  TEKNOLOGI  INFORMASI  DALAM  PENINGKATAN EFEKTIVITAS, EFISIENSI DAN PRODUKTIVITAS PERUSAHAAN’, Jurnal  EL-RIYASAH .  Doi: 10.24014/Jel.V3i1.664.
Kristanto, A. (2018) Perancang Sistem Informasi (Edisi Revisi) , Edisi Revisi .
Pengetahuan,  J.  I.  And  Komputer,  D.  A  N.  T.  (2018)  ‘Sistem  Pendukung  Keputusan  Penentuan Karyawan Terbaik Menggunakan Metode TOPSIS’, 4(1), Pp. 43–48.
Priyambudi, H. (2017) Pengertian Metode Prototype, Tahapan Dan Kelebihan Metode Prototype , 29 November 2017 .
Rahmadhani,  Y.  (2017)  ‘STRATEGI  BRANDING  PORTAL  ONLINE  WWW.TRIPRIAU.COM DALAM  MEMBANGUN  BRAND  AWARENESS  SEBAGAI  PORTAL  ONLINE  PARIWISATA PROVINSI RIAU’, JOM FISIP .
Rahmawati,  N.  And  Mulyono,  H.  (2016)  ‘Analisis  Dan  Perancangan  Sistem  Informasi  Pemasaran Berbasis Web Pada Toko Billy’, Jurnal Manajemen Sistem Informasi .
Susanti, M. (2016) ‘Perancangan Sistem Informasi Akademik Berbasis Web Pada Smk Pasar Minggu Jakarta’, Informatika .