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 | 328

PEMBANGUNAN WEBSITE E-COMMERCE DENGAN FRAMEWORKCODEIGNITER DAN BUSINESS MODEL CANVAS PADA TOKO SUSU

NAUFAL

Angga Aditya Wicaksono1), Lauw Li Hin2)

1Sistem Informasi, Fakultas Teknologi Informasi, Universitas Budi Luhur1,2Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260E-mail : 1512501964@student.budiluhur.ac.id1), lauw.lihin @budiluhur.ac.id 2)

AbstrakToko susu naufal merupakan sebuah toko yang menyediakan atau menjual berbagai kebutuhan bayi sepertisusu,popok dll. Dalam penjualan produk masih sebatas di lingkup wilayah sekitar toko saja sehinggapenghasilan yang didapat tidak stabil bahkan menurun. Oleh karena itu, untuk mengatasi permasalahantersebut dibangunlah website e-commerce yang dapat melakukan transaksi dengan cepat dan akurat denganmenggunakan bahasa pemrograman PHP dengan framework codeigniter dan database management systemMySQL. Adapun pengumpulan data yang digunakan penulis dalam pembuatan website e-commerce ini yaituwawancara, dokumentasi dan metode kepustakaan. Untuk strategi bisnis penulis menggunakan business modelcanvas untuk menjelaskan operasional dari sebuah bisnis dengan menggunakan proses ini dapat merancangtahapan bisnis dari awal hingga akhir. Hasil dari penelitian ini adalah dibangunnya sebuah website yangmudah digunakan oleh pelanggan ataupun admin untuk memperluas pemasaran dan penjualan danmempermudah proses pemesanan serta informasi untuk semua pelanggan.

Kata kunci: Business Model Canvas, E-Commerce,Toko susu, PHP, codeigniter.

1. PENDAHULUAN1.1. Latar Belakang

E-Commerce adalah saluran online yang dapatdijangkau seorang melalui computer, yangdigunakan oleh pebisnis dalam melakukan aktivitasbisnisnya dan digunakan konsumen untukmendapatkan informasi dengan menggunakanbantuan computer yang dalam prosesnya diawalidengan memberi jasa atau informasi kepadakonsumen dalam penentuan pilihan[1]. Denganadanya e-commerce memudahkan kita dalam prosesaktivitas jual dan beli, selain itu juga dapatmenjangkau target pasar yang lebih luas tanpameningkatkan biaya operasional. Proses transaksi e-commerce pun sangat efisien karena bisa dilakukankapanpun dan dimanapun sehingga sangatmenguntungkan para penjual dan pembeli.

Toko Susu Naufal merupakan sebuah tokoyang berfokus pada penjualan susu, popok, dan jugabeberapa kebutuhan bayi lainnya. Untuk penjualandan pemasarannya saat ini toko susu naufal hanyaberfokus pada toko fisik saja tanpa menggunakanmedia promosi lainnya karena berfokus padapenjualan sekitar area toko saja.

Maka dari itu dengan adanya E-Commercediharapkan dapat mempermudah aktivitas transaksiataupun manajemen penjualan serta dapatmeningkatkan pemasaran toko agar lebih luas danpenjualan produk pada toko susu naufal.

1.2. PermasalahanAdapun beberapa masalah yang ada pada Toko

Susu Naufal berdasarkan latar belakang diatassebagai berikut :

a. Pelanggan yang datang ke toko mulaiberkurang, karena Toko Susu Naufal hanyamempunyai toko fisik saja sehingga untukmencapai konsumen yang lokasi nya jauhdari toko tidak terjangkau.

b. Terdapat toko dengan penjualan serupa dilokasi yang sama, sehingga konsumen lebihmemilih membeli produk di toko terdekat.

c. Tidak adanya strategi pemasaran yangdilakukan, hanya menjual danmemasarkannya di toko fisik saja, sehinggapenjualan tidak meningkat.

1.3. Tujuan Dan Manfaat PenulisanAdapun tujuan dan manfaat dari penulisan ini,

sebagai berikut :a. Membuat website e-commerce yang

diharapkan dapat menjangkau konsumendari berbagai wilayah.

b. Membantu pembuatan laporan menjadilebih efisien dan akurat.

c. Dapat memperbarui dan mengetahui jumlahstok barang yang tersedia ataupun tidaktersedia secara otomatis.

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 | 329

1.4. Batasan MasalahPembangunan website e-commerce di Toko

Susu Naufal ini terdapat beberapa batasan masalah.Adapun batasan masalahnya, yaitu :

a. Langkah-langkah membangun website dariawal penginstalan hingga menghasilkanlaporan.

b. Pada website penjualan ini memiliki prosespembayaran, pemesanan, pengiriman danlaporan.

2. METODE PENELITIANUntuk melakukan penelitian ini penulis

menggunakan metode penelitian sebagai berikut :

2.1. KebutuhanUntuk menentukan kebutuhan digunakan

beberapa teknik atau metode yaitu wawancaradengan mengajukan pertanyaan lisan kepada pemiliktoko susu naufal, Dokumentasi yaitu mengumpulkanarsip-arsip atau dokumen terkait dan metodekepustakaan sebagai teknik pengumpulan data dalampenelitian dan membuat Business Model Canvas.

2.2. Perancangan SistemDalam melakukan perancangan system peneliti

menggunakan Unified Modeling Language (UML)yang terdiri dari Activity Diagram, Use CaseDiagram, Class Diagram dan Sequence Diagram.

2.3. PemrogramanDalam tahap pemrograman peneliti

menggunakan bahasa pemrograman PHP denganframework codeigniter serta bootstrap untukpembuatan program.

2.4. PengujianUntuk tahap pengujian peneliti menggunakan

metode black box testing. Black box testingmerupakan metode perancangan yang didasarkanpada spesifikasi perangkat lunak. Data di eksekusi

pada perangkat lunak dan kemudia keluaran dariperangkat lunak di uji apakah sudah sesuai denganyang diharapkan[2].

2.5. ImplementasiSetelah berbagai tahapan yang sudah dilakukan

dan mengetahui apakah system berjalan dengan baikpeneliti menerapkan system yang sudah dibuat dandi uji pada Toko Susu Naufal.

3. HASIL DAN PEMBAHASAN3.1. Business Model Canvas

Business Model Canvas menjelaskan mengenaidasar pemikiran bagaimana sebuah bisnisdiciptakan, diberikan, dan ditangkap nilainya[3].Dalam pembangunan sistem E-Commerce penelitimenggunakan pemodelan Business Model Canvasuntuk merancang kerangka kerja serta menganalisamasalah-masalah serta kebutuhan yang ada padaToko Susu Naufal. Tujuan dari penelitian ini yaituuntuk mengetahui rancangan alur prosespembangunan website E-Commerce pada toko susunaufal dan strategi bisnis yang tepat, seperti dibawahini :

3.2. Activity DiagramActivity Diagram adalah salah satu cara

memodelkan event-event yang terjadi dalam suatuuse case. Berikut merupakan proses bisnis danactivity diagram usulan yang dibuat peneliti untuktoko susu naufal :a. Proses Registrasi

Untuk melakukan transaksi di toko susu naufalpelanggan harus mempunyai akun, jika tidakmempunyai akun pelanggan harus mendaftarterlebih 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 PelangganUntuk proses login pelanggan pilih menu login.

Pelanggan harus mengisi form login yang berupausername dan password yang sudah terdaftar diwebsite kemudian klik tombol login. Sistem akanmemeriksa apakah username dan password seusaidengan yang sudah terdaftar di web dalam database.Bila username atau password salah maka pelangganakan mengisi form login kembali dengan benar danklik login kembali.

c. Proses PemesananPelanggan membuka website

tokosusunaufal.com dan melihat produk-produkyang ada lalu memilih produk mana yang akandibeli dihalaman depan website, atau pilih menukategori untuk melihat produk dari berbagaikategori. Setelah sudah menentukan apa yang ingindibeli, pelanggan klik tombol add to cart makapelanggan akan menuju halaman keranjang belanja,jika ingin lanjut belanja klik tombol lanjutkanbelanja, jika sudah selesai maka klik prosescheckout.

d. Proses CheckoutSistem akan mengecek sesi login pelanggan

jika pelanggan sudah login pelanggan mengkliktombol proses checkout jika belum login makapelanggan login terlebih dahulu lalu klik icon cartdan pilih proses checkout. Lalu sistem akanmenampilkan form checkout kemudian pelangganmengisi form checkout setelah selesai klik tombolcheckout.

e. Proses Konfirmasi BayarPelanggan terlebih dahulu melakukan

pembayaran dengan cara transfer bank. Pelangganlogin di website tokosusunaufal.com dan pilih menukonfirmasi bayar, lalu sistem akan menampilkantransaksi pelanggan dan status pembelian. Pelangganklik icon upload dan sistem akan menampilkan formkonfirmasi pembayaran, pelanggan mengisi formkonfirmasi 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

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 | 331

setelah itu klik tombol konfirmasi kemudian sistemakan menyimpan data pembayaran.

f. Proses Login AdminAdmin membuka halaman login administrator.

Admin mengisi form login yang berupa usernamedan password yang sudah terdaftar di websitekemudian klik tombol login. Sistem akan memeriksaapakah username dan password seusai dengan yangsudah terdaftar di web dalam database. Bilausername atau password salah maka admin akanmengisi form login kembali dengan benar dan kliklogin kembali.

g. Proses Tambah ProdukUntuk menambah produk pilih menu produk,

lalu klik tombol tambah produk dan mengisi form

produk baru, setelah selesai klik tombol tambahkandan sistem akan menyimpan data.

h. Proses LaporanDalam proses laporan admin terlebih dahulu

login, kemudian admin memilih menu laporan.Setelah itu laporan pendapatan, laporan pemesanan,laporan pembayaran, laporan pengiriman danlaporan rekapitulasi akan diserahkan kepada pemiliktoko.

i. Proses Lupa Password PelangganPelanggan pilih menu login dan klik lupa

password, lalu pelanggan akan di alihkan kehalamanlupa password. Pelanggan memasukkan alamatemail yang telah didaftarkan. Lalu sistem akanmengirim email ke email pelanggan lalu pelangganklik link yang terdapat di email dan di alihkan kehalaman reset password dan masukan password barudan klik tombol update password. Setelah itu sistemakan 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 AdminAdmin mengunjungi halaman login

administrator dan klik lupa password, lalu adminakan di alihkan kehalaman lupa password. Adminmemasukkan alamat email yang telah didaftarkan.Lalu sistem akan mengirim email ke email adminlalu admin klik link yang terdapat di email dan dialihkan ke halaman reset password dan masukanpassword baru dan klik tombol update password.Setelah itu sistem akan menyimpan password baru.

3.3. Use Case DiagramUse case adalah adalah deksripsi fungsi dari

sebuah sistem dari perspektif pengguna[4]. Use casebekerja dengan cara mendeskripsikan tipikalinteraksi antara pengguna sebuah sistem (aktor)dengan sistemnya sendiri melalui sebuah cerita

bagaimana sebuah sistem dipakai. Berikut adalahUse Case Diagram yang digambarkan oleh penelitisebagai berikut :a. Use case diagram master

b. Use Case Transaksi

c. Use Case Laporan

3.4. Class DiagramBerikut 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 menuadmin pada Toko Susu Naufal :

b. Struktur Menu Pelanggan (Front End)Struktur tampilan menu pelanggan pada toko

susu naufal adalah sebagai berikut:

3.6. Rancangan Layara. BerandaBerikut adalah rancangan layar beranda

sebelum login pada website tokosusunaufal.com :

b. LoginBerikut ini adalah rancangan login akun pada

toko susu:

c. Upload Konfirmasi BayarBerikut 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

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 | 334

3.7. Sequence DiagramSequence diagram dibuat berdasarkan activity

diagram dan class diagram. Sequencediagram menggambarkan aliran pesan yang terjadiantar kelas yang dideskripsikan pada classdiagram dengan menggunakan operasi yang dimilikikelas tersebut. Untuk aliran pesan, sequencediagram merujuk pada alur system activitydiagram yang telah dibuat sebelumnya[5]. Berikutsequence diagram yang yang digambarkan penelitipada toko susu naufal :

a. Sequence diagram Registrasi

b. Sequence Entry Data Pesanan

c. Sequence Entry Laporan Pendapatan

4. KESIMPULANPenulis dapat mengambil beberapa kesimpulan

berdasarkan penelitian dan pembahasan selamapenulisan dan pembuatan website e-commerce, yaitusebagai berikut :

a. Dengan adanya website e-commerce dapatmemperluas area penjualan dan pemasaranproduk.

b. Menampilkan informasi berbagai produkyang lengkap bagi pengunjung.

c. Pembangunan website e-commerce yangmudah digunakan baik dari segi pelangganmaupun 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 PraRegistrasi 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 PerancanganSistem Informasi Rawat Jalan Di Rumah SakitHewan Universitas Airlangga Surabaya DenganMetode Berorientasi Objek. Surabaya: UniversitasAirlangga. 2013.

Gambar 22. Sequence Registrasi

Gambar 23. Sequence Entry Data Pesanan

Gambar 24. Sequence Entry Laporan Pendapatan