## PEMBANGUNAN WEBSITE E-COMMERCE DENGAN FRAMEWORK

## CODEIGNITER DAN BUSINESS MODEL CANVAS PADA TOKO SUSU NAUFAL
Angga Aditya Wicaksono 1) , Lauw Li Hin 2)
1 Sistem Informasi, Fakultas Teknologi Informasi, Universitas Budi Luhur
1,2 Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260 E-mail : 1512501964@student.budiluhur.ac.id 1) , lauw.lihin @budiluhur.ac.id 2)

## Abstrak
Toko susu naufal merupakan sebuah toko yang menyediakan atau menjual berbagai kebutuhan bayi seperti susu,popok   dll.   Dalam   penjualan   produk   masih   sebatas   di   lingkup   wilayah   sekitar   toko   saja   sehingga penghasilan   yang   didapat   tidak   stabil   bahkan   menurun.   Oleh   karena   itu,   untuk   mengatasi   permasalahan tersebut dibangunlah website e-commerce yang dapat melakukan transaksi dengan cepat dan akurat dengan menggunakan bahasa pemrograman PHP dengan framework codeigniter dan database management system MySQL. Adapun pengumpulan data yang digunakan penulis dalam pembuatan website e-commerce ini yaitu wawancara, dokumentasi dan metode kepustakaan. Untuk strategi bisnis penulis menggunakan business model canvas untuk menjelaskan operasional dari sebuah bisnis dengan menggunakan proses ini dapat merancang tahapan bisnis dari awal hingga akhir. Hasil dari penelitian ini adalah dibangunnya sebuah website yang mudah   digunakan   oleh   pelanggan   ataupun   admin   untuk   memperluas   pemasaran   dan   penjualan   dan mempermudah proses pemesanan serta informasi untuk semua pelanggan.
Kata kunci: Business Model Canvas , E-Commerce ,Toko susu, PHP, codeigniter .

## 1. PENDAHULUAN
1.1. Latar Belakang E-Commerce adalah saluran online yang dapat dijangkau   seorang   melalui   computer,   yang digunakan oleh pebisnis dalam melakukan aktivitas bisnisnya   dan   digunakan   konsumen   untuk mendapatkan   informasi   dengan   menggunakan bantuan   computer   yang   dalam   prosesnya   diawali dengan   memberi   jasa   atau   informasi   kepada konsumen   dalam   penentuan   pilihan[1].   Dengan adanya e-commerce memudahkan kita dalam proses aktivitas   jual   dan   beli,   selain   itu   juga   dapat menjangkau   target   pasar   yang   lebih   luas   tanpa meningkatkan biaya operasional. Proses transaksi e- commerce pun sangat efisien karena bisa dilakukan kapanpun   dan   dimanapun   sehingga   sangat menguntungkan para penjual dan pembeli.
Toko   Susu   Naufal   merupakan   sebuah   toko yang berfokus pada penjualan susu, popok, dan juga beberapa kebutuhan bayi lainnya. Untuk penjualan dan pemasarannya saat ini toko susu naufal hanya berfokus   pada   toko   fisik   saja   tanpa   menggunakan media   promosi   lainnya   karena   berfokus   pada penjualan sekitar area toko saja.
Maka   dari   itu   dengan   adanya E-Commerce diharapkan dapat mempermudah aktivitas transaksi ataupun   manajemen   penjualan   serta   dapat meningkatkan pemasaran toko agar lebih luas dan penjualan produk pada toko susu naufal.

## 1.2. Permasalahan
Adapun beberapa masalah yang ada pada Toko Susu   Naufal   berdasarkan   latar   belakang   diatas sebagai berikut :
a. Pelanggan   yang   datang   ke   toko   mulai berkurang, karena Toko Susu Naufal hanya mempunyai toko fisik saja sehingga untuk mencapai konsumen yang lokasi nya jauh dari toko tidak terjangkau.
b. Terdapat toko dengan penjualan serupa di lokasi yang sama, sehingga konsumen lebih memilih membeli produk di toko terdekat.
c. Tidak   adanya   strategi   pemasaran   yang dilakukan,   hanya   menjual   dan memasarkannya di toko fisik saja, sehingga penjualan tidak meningkat.

## 1.3. Tujuan Dan Manfaat Penulisan
Adapun tujuan dan manfaat dari penulisan ini, sebagai berikut :
a. Membuat website   e-commerce yang diharapkan   dapat   menjangkau   konsumen dari berbagai wilayah.
b. Membantu   pembuatan   laporan   menjadi lebih efisien dan akurat.
c. Dapat memperbarui dan mengetahui jumlah stok   barang   yang   tersedia   ataupun   tidak tersedia secara otomatis.

## 1.4. Batasan Masalah
Pembangunan website   e-commerce di   Toko Susu Naufal ini terdapat beberapa batasan masalah. Adapun batasan masalahnya, yaitu :
a. Langkah-langkah membangun website dari awal   penginstalan   hingga   menghasilkan laporan.
b. Pada website penjualan ini memiliki proses pembayaran,   pemesanan,   pengiriman   dan laporan.

## 2. METODE PENELITIAN
Untuk  melakukan   penelitian   ini   penulis menggunakan metode penelitian sebagai berikut :

## 2.1. Kebutuhan
Untuk   menentukan   kebutuhan   digunakan beberapa   teknik   atau   metode   yaitu   wawancara dengan mengajukan pertanyaan lisan kepada pemilik toko susu naufal, Dokumentasi yaitu mengumpulkan arsip-arsip   atau   dokumen   terkait   dan   metode kepustakaan sebagai teknik pengumpulan data dalam penelitian dan membuat Business Model Canvas .

## 2.2. Perancangan Sistem
Dalam melakukan perancangan system peneliti menggunakan Unified   Modeling  Language (UML) yang   terdiri   dari Activity   Diagram , Use   Case Diagram, Class Diagram dan Sequence Diagram .

## 2.3. Pemrograman
Dalam   tahap   pemrograman   peneliti menggunakan   bahasa   pemrograman   PHP   dengan framework   codeigniter serta bootstrap untuk pembuatan program.

## 2.4. Pengujian
Untuk  tahap   pengujian  peneliti  menggunakan metode black   box   testing . Black   box   testing merupakan   metode   perancangan   yang   didasarkan pada spesifikasi perangkat lunak. Data di eksekusi
pada   perangkat   lunak   dan   kemudia   keluaran   dari perangkat lunak di uji apakah sudah sesuai dengan yang diharapkan[2].

## 2.5. Implementasi
Setelah berbagai tahapan yang sudah dilakukan dan mengetahui apakah system berjalan dengan baik peneliti menerapkan system yang sudah dibuat dan di uji pada Toko Susu Naufal.

## 3. HASIL DAN PEMBAHASAN
3.1. Business Model Canvas
Business Model Canvas menjelaskan mengenai dasar   pemikiran   bagaimana   sebuah   bisnis diciptakan,   diberikan,   dan   ditangkap   nilainya [3] . Dalam   pembangunan   sistem E-Commerce peneliti menggunakan   pemodelan Business   Model   Canvas untuk merancang kerangka kerja serta menganalisa masalah-masalah   serta   kebutuhan   yang   ada   pada Toko Susu Naufal. Tujuan dari penelitian ini yaitu untuk   mengetahui   rancangan   alur   proses pembangunan website E-Commerce pada toko susu naufal dan strategi bisnis yang tepat, seperti dibawah ini :

## 3.2. Activity Diagram
Activity   Diagram adalah   salah   satu   cara memodelkan event-event yang   terjadi   dalam   suatu use   case. Berikut   merupakan   proses   bisnis   dan activity diagram usulan yang dibuat peneliti untuk toko susu naufal :
a. Proses Registrasi Untuk melakukan transaksi di toko susu naufal pelanggan   harus   mempunyai   akun,   jika   tidak mempunyai   akun   pelanggan   harus   mendaftar terlebih dahulu.
Gambar 1. Metode Penelitian
Gambar 2. Business Model Canvas
J u r n a l   I D E A L I S   V o l . 3   N o . 1 ,   J a n u a r i   2 0 2 0   | 330
b. Proses Login Pelanggan Untuk proses login pelanggan pilih menu login. Pelanggan   harus   mengisi form   login yang   berupa username dan password yang   sudah   terdaftar   di website kemudian   klik   tombol   login.   Sistem   akan memeriksa   apakah username dan password seusai dengan yang sudah terdaftar di web dalam database . Bila username atau password salah maka pelanggan akan mengisi form login kembali dengan benar dan klik login kembali.
c. Proses Pemesanan
Pelanggan membuka
website
tokosusunaufal.com   dan   melihat   produk-produk yang   ada   lalu   memilih   produk   mana   yang   akan dibeli   dihalaman   depan website ,   atau   pilih   menu kategori   untuk   melihat   produk   dari   berbagai kategori. Setelah sudah menentukan apa yang ingin dibeli,   pelanggan   klik   tombol add   to   cart maka pelanggan akan menuju halaman keranjang belanja, jika   ingin   lanjut   belanja   klik   tombol   lanjutkan belanja,   jika   sudah   selesai   maka   klik   proses checkout.

## d. Proses Checkout
Sistem   akan   mengecek   sesi   login   pelanggan jika   pelanggan   sudah   login   pelanggan   mengklik tombol   proses checkout jika   belum login maka pelanggan login terlebih dahulu lalu klik icon cart dan   pilih   proses checkout .   Lalu   sistem   akan menampilkan form   checkout kemudian   pelanggan mengisi form checkout setelah selesai  klik tombol checkout .
e. Proses Konfirmasi Bayar Pelanggan   terlebih   dahulu   melakukan pembayaran dengan cara transfer bank . Pelanggan login di website tokosusunaufal.com dan pilih menu konfirmasi   bayar,   lalu   sistem   akan   menampilkan transaksi pelanggan dan status pembelian. Pelanggan klik icon upload dan sistem akan menampilkan form konfirmasi   pembayaran,   pelanggan   mengisi form konfirmasi   pembayaran   dan   upload   bukti   transfer
Gambar 3. Activity Diagram Proses Pendaftaran
Gambar 4. Activity Diagram Proses Login Pelanggan
Gambar 5. Activity Diagram Proses pemesanan
Gambar 6. Activity Diagram Checkout
setelah itu klik tombol konfirmasi kemudian sistem akan menyimpan data pembayaran.
f. Proses Login Admin
Admin membuka halaman login administrator. Admin mengisi form   login yang   berupa username dan password yang   sudah   terdaftar   di website kemudian klik tombol login. Sistem akan memeriksa apakah username dan password seusai dengan yang sudah   terdaftar   di web dalam database .   Bila username atau password salah   maka admin akan mengisi form login kembali dengan benar dan klik login kembali.
g. Proses Tambah Produk
Untuk menambah produk pilih menu produk, lalu klik tombol tambah produk dan mengisi form
produk baru, setelah selesai klik tombol tambahkan dan sistem akan menyimpan data.
h. Proses Laporan Dalam   proses   laporan   admin   terlebih   dahulu login,   kemudian   admin   memilih   menu   laporan. Setelah itu laporan pendapatan, laporan pemesanan, laporan   pembayaran,   laporan   pengiriman   dan laporan rekapitulasi akan diserahkan kepada pemilik toko.
i. Proses Lupa Password Pelanggan Pelanggan   pilih menu   login dan   klik   lupa password, lalu pelanggan akan di alihkan kehalaman lupa password .   Pelanggan   memasukkan   alamat email   yang   telah   didaftarkan.   Lalu   sistem   akan mengirim email ke email pelanggan lalu pelanggan klik link yang terdapat di email dan di alihkan ke halaman reset password dan masukan password baru dan klik tombol update password . Setelah itu sistem akan menyimpan password baru.
Gambar 7. Activity Diagram Konfirmasi Bayar
Gambar 8. Activity Diagram Login Admin
Gambar 9. Activity Diagram Tambah Produk
Gambar 10. Activity Diagram Laporan
J u r n a l   I D E A L I S   V o l . 3   N o . 1 ,   J a n u a r i   2 0 2 0   | 332
j. Proses Lupa Password Admin
Admin mengunjungi   halaman
login administrator dan   klik   lupa password ,   lalu admin akan   di   alihkan   kehalaman   lupa password . Admin memasukkan  alamat   email  yang  telah   didaftarkan. Lalu sistem akan mengirim email ke email admin lalu admin klik link yang terdapat di email dan di alihkan   ke   halaman reset   password dan   masukan password baru   dan   klik   tombol update   password . Setelah itu sistem akan menyimpan password baru.

## 3.3. Use Case Diagram
Use   case   adalah   adalah   deksripsi   fungsi   dari sebuah sistem dari perspektif pengguna [4] . Use case bekerja   dengan   cara   mendeskripsikan   tipikal interaksi   antara   pengguna   sebuah   sistem   (aktor) dengan   sistemnya   sendiri   melalui   sebuah   cerita
bagaimana   sebuah   sistem   dipakai .   Berikut   adalah Use Case Diagram yang digambarkan oleh peneliti sebagai berikut :
a. Use case diagram master b. Use Case Transaksi c. Use Case Laporan

## 3.4. Class Diagram
Berikut   adalah Class   Diagram yang digambarkan sebagai berikut :
Gambar 11. Activity Diagram Lupa Password Pelanggan
Gambar 12. Activity Diagram Lupa Password Admin
Gambar 13. Use Case Diagram Master
Gambar 14. Use Case Diagram Transaksi
Gambar 15. Use Case Diagram Laporan
J u r n a l   I D E A L I S   V o l . 3   N o . 1 ,   J a n u a r i   2 0 2 0   | 333
3.5. Struktur Tampilan (Menu)
a. Struktur Menu Admin ( Back End)
Berikut   ini   adalah   struktur   tampilan   menu admin pada Toko Susu Naufal :
b. Struktur Menu Pelanggan ( Front End) Struktur tampilan  menu pelanggan pada  toko susu naufal adalah sebagai berikut:

## 3.6. Rancangan Layar
a. Beranda
Berikut   adalah   rancangan   layar   beranda sebelum login pada website tokosusunaufal.com :
b. Login
Berikut ini adalah rancangan login akun pada toko susu:
c. Upload Konfirmasi Bayar
Berikut   ini   adalah   rancangan   layar   dimana pelanggan ingin upload bukti bayar :
Gambar 16. Class Diagram Gambar 17. Struktur Menu Admin Gambar 18. Struktur Menu Pelanggan
Gambar 19. Menu Utama
Gambar 20. Login
Gambar 21. Confirm Payment

## 3.7. Sequence Diagram
Sequence   diagram dibuat   berdasarkan activity diagram dan class diagram . Sequence
diagram menggambarkan  aliran  pesan  yang  terjadi antar   kelas   yang   dideskripsikan   pada class diagram dengan menggunakan operasi yang dimiliki kelas   tersebut.   Untuk   aliran   pesan, sequence diagram merujuk   pada   alur   system activity diagram yang   telah   dibuat   sebelumnya [5] .   Berikut sequence diagram yang yang digambarkan peneliti pada toko susu naufal :
a. Sequence diagram Registrasi
b. Sequence Entry Data Pesanan
c. Sequence Entry Laporan Pendapatan

## 4. KESIMPULAN
Penulis dapat mengambil beberapa kesimpulan berdasarkan   penelitian   dan   pembahasan   selama penulisan dan pembuatan website e-commerce, yaitu sebagai berikut :
a. Dengan adanya website e-commerce dapat memperluas area penjualan dan pemasaran produk.
b. Menampilkan   informasi   berbagai   produk yang lengkap bagi pengunjung.
c. Pembangunan website   e-commerce yang mudah digunakan baik dari segi pelanggan maupun dari segi admin.

## 5. DAFTAR PUSTAKA
[1] Kotler,   Philip   and   Gary  Amstrong.   Prinsip-prinsip Pemasaran. Edisi 13 jilid 1. Jakarta: Erlangga., 2012
[2] Budiman,   Agustiar.   Pengujian   Perangkat   Lunak denganMetode   Black   Box   Pada   Proses   Pra Registrasi   UserVia   Website.   Makalah,   2012. halaman: 4.
[3] Alexander   Osterwalder   and   Yves   Pigneur. Business Model Generation, 2012
[4] Maimunah.   Definisi   Use   Case.   Jurnal   CCIT. Tangerang: Perguruan Tinggi Raharja. 2011.
[5] Vidia.   Dhanada,   dkk.   Analisis   Dan   Perancangan Sistem   Informasi   Rawat   Jalan   Di   Rumah   Sakit Hewan   Universitas   Airlangga   Surabaya   Dengan Metode   Berorientasi   Objek.   Surabaya:   Universitas Airlangga. 2013.
Gambar 22. Sequence Registrasi
Gambar 23. Sequence Entry Data Pesanan
Gambar 24. Sequence Entry Laporan Pendapatan