Rancang Bangun Sistem Informasi Pemasaran Produk Umkm Berbasis Web Menggunakan Framework Codeigniter

RANCANG BANGUN SISTEM INFORMASI PEMASARAN
PRODUK UMKM BERBASIS WEB MENGGUNAKAN

FRAMEWORK CODEIGNITER
(STUDI KASUS : OTAK-OTAK MAMIH)
PROYEK TEKNIK INFORMATIKA
Diajukan untuk Memenuhi Persyaratan Kelulusan Mata Kuliah

Proyek Teknik Informatika pada Program Studi Teknik Informatika
Universitas Catur Insan Cendekia
Oleh :
Muhamad Adrie Saputra (2018102052)
Muhammad Syahrul Rohman (2018102059)
PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS CATUR INSAN CENDEKIA
CIREBON
2021
LEMBAR PENGESAHAN

FRAMEWORK CODEIGNITER (STUDI KASUS : OTAK-
OTAK MAMIH)
Disusun Oleh :

Laporan Proyek Teknik Informatika ini telah dibaca dan diperiksa

kelengkapannya sesuai dengan ketentuan isi dan penulisan
yang telah ditetapkan oleh Program Studi
Cirebon, 17 September 2021
Mengetahui,
Ketua Program Studi Dosen Pembimbing
Kusnadi, M.Kom. Ilwan Syafrinal, M.Kom.

LEMBAR PENGUJIAN

FRAMEWORK CODEIGNITER
(STUDI KASUS : OTAK-OTAK MAMIH)
Disusun Oleh :

Laporan Proyek Teknik Informatika ini telah dibaca dan diperiksa

kelengkapannya sesuai dengan ketentuan isi dan penulisan
yang telah ditetapkan oleh Program Studi
Cirebon, 17 September 2021
Mengetahui,
Penguji 1 Penguji 2
Kusnadi, M.Kom. Lena Magdalena, S.Kom., M.MSI.

KATA PENGANTAR
Segala puji senantiasa disampaikan kepada Allah SWT yang telah

memberikan kekuatan dan rahmat-Nya sehingga penyusunan laporan ini dapat
berjalan lancar. Laporan ini sebagai salah satu Tugas Mata Kuliah Proyek
Informatika yang berjudul Rancang Bangun Sistem Informasi Pemasaran
Produk UMKM Berbasis Web Menggunakan Framework Codeigniter (Studi
Kasus : Otak-Otak Mamih)
Laporan ini disusun dengan kerja keras penulis dan pihak-pihak yang turut
berperan di dalamnya. Karena itu, secara khusus penulis mengucapkan terima
kasih kepada pihak-pihak yang turut membantu dalam menyelesaikan penyusunan
laporan ini.
1. Bapak DR. Chandra Lukita S.E.,M.M. Selaku Rektor Universitas Catur Insan
Cendekia Cirebon
2. Bapak Marsani Asfi M.Si. Selaku Dekan Fakultas Teknik Universitas Catur
Insan Cendekia
3. Bapak Kusnadi S.Kom.,M.Kom. Selaku Ketua Fakultas Teknik Informatika
Universitas Catur Insan Cendekia
4. Bapak Ilwan Syafrinal M.Kom. Selaku Dosen Pembimbing
Selama proses penyusunan dan hasil yang disajikan dalam bentuk laporan ini,
penulis menyadari bahwa masih banyak kesalahan. Tidak ada manusia yang
sempurna, karena itu penulis senantiasa memohon maaf kepada pembaca apabila
masih menemukan kesalahan dalam penulisan.
Penulis juga mengharapkan adanya kritik dan saran membangun dari pembaca,
dengan begitu dapat meningkatkan dan membantu penulis untuk terus
berkembang di masa depan.
Akhir kata, semoga laporan yang kami susun ini dapat menambah wawasan bagi
pembaca secara umum dan penulis secara khusus. Semoga dari laporan ini dapat
memberikan manfaat bagi penulis lain.
Cirebon, Agustus 2021
Penulis
iv
ABSTRAK
Usaha Mikro Kecil Menengah (UMKM) merupakan unit usaha yang

jumlahnya paling besar di Indonesia UMKM terbukti memiliki ketahanan dalam
berbagai permasalahan krisis ekonomi dan bahkan jumlahnya semakin meningkat.
Keberhasilan dari UMKM dipengaruhi oleh informasi pemasaran Hal ini memberi
inspirasi untuk mengetahui seberapa besar kemajuan usaha UMKM Otak-Otak
Mamih . Kebanyakan UMKM di Indonesia tidak menggunakan informasi
pemasaran menggunakan web dalam usahanya. Tidak adanya penggunaan
informasi pemasaran yang dilakukan oleh pemilik UMKM.
Tujuan dari penelitian ini adalah membuat sebuah sistem yang dapat
membantu memasarkan sebuah produk Usaha Mikro Kecil Menengah (UMKM)
agar efektif dan lebih terorganisir dengan baik. Pembuatan Sistem Informasi
Pemasaran Usaha Mikro Kecil Menengah (UMKM) ini menggunakan metode
waterfall. Sistem ini dibuat dengan berbasiskan web menggunakan Bahasa PHP,
Code Igniter 3, disertai basis data MySQL guna penyimpanan datanya. Sistem ini
berhasil diujikan menggunakan metode pengujian black-box.
Kata Kunci : Sistem Informasi, UMKM, Produk, Pemasaran.
v
ABSTRACT
Micro, Small and Medium Enterprises (MSMEs) are the business units with
the largest number in Indonesia. MSMEs are proven to have resilience in various
economic crisis problems and their numbers are even increasing. The success of
UMKM is influenced by marketing information. Most MSMEs in Indonesia do not
use marketing information using the web in their business. There is no use of
marketing information by MSME owners.
The purpose of this research is to create a system that can help market a product
for Micro, Small and Medium Enterprises (MSMEs) to be effective and more well
organized. The creation of this Micro, Small and Medium Enterprises (MSME)
Marketing Information System uses the waterfall method. This system is made on
a web-based basis using the PHP language, Code Igniter 3, accompanied by a
MySQL database for data storage. This system was successfully tested using the
black-box testing method.
Keywords: Information Systems, MSMEs, Products, Marketing.
vi
DAFTAR ISI
LEMBAR JUDUL
LEMBAR PENGESAHAN
LEMBAR PENGUJIAN
KATA PENGANTAR
ABSTRAK
DAFTAR ISI
DAFTAR GAMBARi
DAFTAR TABEL
BAB I PENDAHULUAN............................................................................I-1
1.1. Latar Belakang MasalahI-
1.2. Identifikasi MasalahI-
1.3. Batasan MasalahI-3
1.4. TujuanI-
1.5. Metode PenelitianI-
1.5.1. Metode Pengumpulan DataI-
1.5.2. Metode pengembangan perangkat lunakI-
1.6. Sistematika PenulisanI-
BAB II LANDASAN TEORI.......................................................................II-1
2.1. Tinjauan PustakaII-
2.2. Dasar TeoriII-
2.2.1. Sistem InformasiII-
2.2.2. PemasaranII-
vii
2.2.2.1. Konsep Bauran Pemasaran (Marketing Mix)II-4
2.2.3. UMKMII-
2.2.4. WEBII-
2.2.5. FrameworkII-
2.2.6. CodeigniterII-
2.3. Sublime TextII-
2.4. XamppII-
2.5. PHP (Hypertext Processor)II-
2.6. HTML(Hyper Text Mark Up Language)II-
2.7. MySQLII-
2.8. CSSII-
2.9. Fungsi WebII-
2.10. Otak-OtakII-
2.11. Teori UMLII-
2.11.1. Use Case DiagramII-
2.11.2. Activity DiagramII-
2.11.3. Sequence DiagramII-
2.11.4. Class DiagramII-
BAB III ANALISIS DAN PERANCANGAN...............................................III-1
3.1. Gambaran Umum Perusahaan/Studi KasusIII-
3.1.1. Struktur OrganisasiIII-
3.2. Analisis SistemIII-
3.2.1. Analisis MasalahIII-
3.2.2. Analisis Prosedur Yang Sedang BerjalanIII-
viii
3.2.3. Analisis Kebutuhan FungsionalIII-
3.2.4. Analisis Kebutuhan Non FungsionalIII-
3.2.4.1. Analisis Perangkat KerasIII-
3.2.4.2. Analisis Perangkat LunakIII-
3.3. PerancanganIII-
3.3.1. FlowchartIII-
3.3.2. Use Case DiagramIII-
3.3.3. Activity DiagramIII-
3.3.4. Sequence DiagramIII-
3.3.5. Class DiagramIII-
3.3.6. Perancangan Antar Muka (Graphical User Interface)III-
3.3.6.1. Perancangan Antar Muka AdminIII-
3.3.6.2. Perancangan Antar Muka CustomerIII-
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM............................IV-1
4.1. Implementasi SistemIV-
4.1.1. Kebutuhan SistemIV-
4.2. Implementasi SistemIV-2
4.2.1. Halaman Untuk PengunjungIV-
4.2.2. Halaman Form LoginIV-5
4.2.3. Halaman Form RegisterIV-
4.2.4. Halaman AdminIV-
4.2.5. Halaman CustomerIV-
4.3. Pengujian Hasil ProgramIV-
4.3.1. Pengujian BlackboxIV-
ix
4.3.2. Pengujian Halaman Untuk PengunjungIV-
4.3.3. Pengujian Halaman Untuk AdminIV-
4.3.4. Pengujian Halaman Untuk CustomerIV-
BAB V KESIMPULAN DAN SARAN........................................................V-1
5.1. KesimpulanV-
5.2. SaranV-
DAFTAR PUSTAKA
x
DAFTAR GAMBAR
Gambar 1.1. Metode Waterfall.........................................................................I-4
Gambar 3.1. Flowchart alur sistem yang berjalan............................................III-6
Gambar 3.2. Use Case Diagram Admin...........................................................III-7
Gambar 3.3. Use Case Diagram Costumer / Pembeli.......................................III-8
Gambar 3.4. Activity Diagram Admin.............................................................III-20
Gambar 3.5. Activity Diagram Customer.........................................................III-21
Gambar 3.6. Sequence Diagram Login Admin................................................III-22
Gambar 3.7. Sequence Diagram Admin Mengelola Data Customer................III-23
Gambar 3.8. Sequence Diagram Admin Mengelola Data Produk....................III-24
Gambar 3.9. Sequence Diagram Admin Mengelola Data Kategori.................III-25
Gambar 3.10. Sequence Diagram Admin Mengelola Verifikasi Pembayaran Dan
Mencetak Laporan.....................................................................III-27
Gambar 3.11. Sequence Customer Register.....................................................III-28
Gambar 3.12. Sequence Diagram Login Customer..........................................III-29
Gambar 3.13. Sequence Diagram Customer Membeli Sebuah Produk............III-30
Gambar 3.14. Sequence Diagram Customer Melakukan Checkout Di Keranjang
Belanja.......................................................................................III-31
Gambar 3.15. Sequence Diagram Customer Membayar Di Checkout.............III-32
Gambar 3.16. Sequence Diagram Customer Belum Melakukan Pembayaran. III-33
Gambar 3.17. Sequence Diagram Customer Belum Melakukan Pembayaran. III-34
Gambar 3.18. Class Diagram............................................................................III-35
Gambar 3.19. Perancangan antar muka index admin.......................................III-36
Gambar 3.20. Perancangan antar muka Login admin.......................................III-37
xi
Gambar 3.21. Perancangan antar muka dashboard admin................................III-38
Gambar 3.22. Perancangan antar muka halaman data produk..........................III-39
Gambar 3.23. Perancangan antar muka Tambah Data Produk.........................III-40
Gambar 3.24. Perancangan antar muka Edit Data Produk...............................III-41
Gambar 3.25. Perancangan antar muka Data Kategori.....................................III-42
Gambar 3.26. Perancangan antar muka Data Kategori.....................................III-43
Gambar 3.27. Perancangan antar muka Edit Data Kategori.............................III-44
Gambar 3.28. Perancangan antar muka Data Customer..................................III-45
Gambar 3.29. Perancangan antar muka Data Pembayaran...............................III-46
Gambar 3.30. Perancangan antar muka Data Pembayaran...............................III-47
Gambar 3.31. Perancangan antar muka Halaman Register..............................III-48
Gambar 3.32. Perancangan antar muka Halaman Login Customer..................III-49
Gambar 3.33. Perancangan antar muka Halaman Detail Produk.....................III-50
Gambar 3.34. Perancangan antar muka Halaman Cart.....................................III-51
Gambar 3.35. Perancangan antar muka Halaman Checkout............................III-52
Gambar 3.36. Perancangan antar muka Halaman Status Belanja.....................III-53
Gambar 4.1. Halaman Utama 1........................................................................IV-2
Gambar 4.5. Halaman Form Login...................................................................IV-5
Gambar 4.6. Halaman Form Register...............................................................IV-6
Gambar 4.7. Halaman Dashboard Admin.........................................................IV-7
Gambar 4.8. Halaman Data Produk..................................................................IV-8
xii
Gambar 4.9. Halaman Tambah Data Produk....................................................IV-9
Gambar 4.10. Halaman Update Data Produk...................................................IV-10
Gambar 4.11. Halaman Data Kategori.............................................................IV-11
Gambar 4.12. Halaman Tambah Data Kategori..............................................IV-12
Gambar 4.13. Halaman Edit Data Kategori......................................................IV-12
Gambar 4.14. Halaman Data Customer............................................................IV-13
Gambar 4.15. Halaman Data Pembayaran........................................................IV-14
Gambar 4.16. Halaman Verifikasi Pembayaran..............................................IV-14
Gambar 4.17. Halaman Tampilan Customer 1................................................IV-15
Gambar 4.20. Halaman Tampilan Customer Dengan Produk Porsi Biasa......IV-17
Gambar 4.21. Halaman Tampilan Customer Dengan Produk Porsi Sedang...IV-18
Gambar 4.22. Halaman Tampilan Customer Dengan Produk Porsi Besar......IV-18
Gambar 4.23. Halaman Belanja........................................................................IV-19
Gambar 4.24. Halaman Cart.............................................................................IV-20
Gambar 4.25. Halaman Checkout.....................................................................IV-21
Gambar 4.26. Halaman Status Belanja............................................................IV-22
Gambar 4.27. Halaman Cetak Kwitansi..........................................................IV-23
xiii
DAFTAR TABEL
Tabel 2.1. Use Case Diagram...........................................................................II-11
Tabel 2.2. Activity Diagram..............................................................................II-13
Tabel 2.3. Sequence Diagram...........................................................................II-14
Tabel 2.4. Class Diagram.................................................................................II-14
Tabel 3.2. Masalah atau kendala perusahaan....................................................III-2
Tabel 3.3. Pendefinisian Aktor.........................................................................III-7
Tabel 3.4. Skenario Use Case Login Admin.....................................................III-8
Tabel 3.5. Skenario Use Case Dashboard Admin............................................III-8
Tabel 3.6. Skenario Use Case Mengelola Data Produk....................................III-9
Tabel 3.7. Skenario Use Case Kelola Data Kategori........................................III-10
Tabel 3.8. Skenario Use Case Kelola Data Customer......................................III-12
Tabel 3.9. Skenario Use Case Verifikasi Pembayaran.....................................III-13
Tabel 3.10. Scenario Use Case Cetak Laporan................................................III-14
Tabel 3.11. Scenario Use Case Logout.............................................................III-14
Tabel 3.12. Scenario Use Case Lihat Produk...................................................III-15
Tabel 3.13. Skenario Use Case Login Customer..............................................III-15
Tabel 3.14.Skenario Use Case Menu Utama....................................................III-16
Tabel 3.15. Skenario Use Case Pilih Produk....................................................III-16
Tabel 3.16. Skenario Use Case Pesan Produk..................................................III-17
Tabel 3.17. Skenario Use Case Bayar Pesanan...............................................III-17
Tabel 3.18. Skenario Use Case Lihat Keranjang Belanja................................III-18
Tabel 3.19. Skenario Use Case Lihat Status Pemesanan..................................III-18
xiv
Tabel 4.1. Perangkat keras yang digunakanIV-
Tabel 4.2. Perangkat Lunak Yang DigunakanIV-
Tabel 4.3. Pengujian Halaman IndexIV-
Tabel 4.4. Pengujian Halaman LoginIV-
Tabel 4.5. Hasil Pengujian Halaman RegisterIV-
Tabel 4.6. Hasil Pengujian Halaman Dashboard AdminIV-
Tabel 4.7. Hasil Pengujian Halaman Data ProdukIV-
Tabel 4.8. Halaman Tambah Data produkIV-
Tabel 4.9. Hasil Pengujian Halaman Update Data ProdukIV-
Tabel 4.10. Hasil Pengujian Halaman Data PembayaranIV-
Tabel 4.11. Hasil Pengujian Halaman Tambah Data KategoriIV-
Tabel 4.12. Hasil Pengujian Halaman Edit Data KategoriIV-
Tabel 4.13. Hasil Pengujian Halaman Data CustomerIV-
Tabel 4.14. Hasil Pengujian Halaman Data PembayaranIV-
Tabel 4.15. Hasil Pengujian Halaman Verifikasi PembayaranIV-
Tabel 4.16. Hasil Pengujian Halaman Cetak NotaIV-
Tabel 4.17. Hasil Pengujian Halaman UpdateIV-
Tabel 4.18. Hasil Pengujian Halaman Update PengirimanIV-
Tabel 4.19. Hasil Pengujian Halaman CustomerIV-
Tabel 4.20. Hasil Pengujian Halaman BelanjaIV-
Tabel 4.21. Hasil Pengujian Halaman CartIV-
Tabel 4.22. Hasil Pengujian Halaman CheckoutIV-
Tabel 4.23. Hasil Pengujian Halaman Status BelanjaIV-
xv
BAB I
PENDAHULUAN
1.1. Latar Belakang Masalah
Pengembangan sistem informasi telah merambah berbagai bidang
kehidupan tidak terkecuali bidang bisnis dan perdagangan. Dengan adanya
internet proses pemasaran dan penjualan dapat dilakukan kapan saja tanpa terikat
ruang dan waktu. Saat ini teknologi semakin berkembang pesat seiring dengan
meningkatnya kebutuhan banyak orang untuk mempermudah dan mengefisienkan
berbagai kegiatan. Teknologi juga berperan dalam perkembangan di dunia bisnis
dan perdagangan. Salah satunya adalah penggunaan teknologi di sektor Usaha
Mikro Kecil Menengah (UMKM) yang dapat dimanfaatkan sebagai media
pemasaran.
UMKM Merupakan pilar perekonomian nasional. Selain memberikan
kontribusi pada penyerapan tenaga kerja. UMKM ini juga memiliki peran dalam
pemerataan pendapatan dan wadah social ekonomi masyarakat. Meskipun
memiliki peran strategis sebagai penopang perekonomian rakyat dan berbagai
kebijakan telah di lakukan untuk UMKM.
OTAK-OTAK MAMIH merupakansebuah UMKM yang berada di pinggir
jalan dengan menjualkan produk makanan cepat saji di antaranya Otak-otak. Saat
ini pemasaran yang dilakukan pada UMKM Warung Otak-Otak MAMIH masih
dilaksanakan secara manual, yaitu dengan cara melayani pelanggan secara
langsung sehingga penjualan kurang efektif karena banyak pelanggan yang sudah
I-1
mengantri tidak terlayani dan pada otak-otak mamih belum ada media untuk
meningkatkan pemasaran produk. Untuk menghindari hal tersebut, maka
diperlukannya web yang dapat memudahkan pedagang dan pembeli dalam
melaksanakan transaksi pembelian tanpa harus bertemu langsung dan mengantri,
Dari uraian latar belakang diatas diperlukan sebuah web untuk
dapatmeningkatkan produktivitas dan pelayanan Usaha Otak-Otak Mamih. Web
dapat dijadikan sebagai media usaha bisnis yang efektif dan efesien, maka dari itu
penulis ingin melakukan penelitian dengan judul : Rancang Bangun Sistem
Informasi Pemasaran Produk Umkm Berbasis Web Menggunakan Framework
Codeigniter (Studi Kasus : Otak-Otak Mamih).
1.2. Identifikasi Masalah
Berdasarkan uraian latar belakang masalah tersebut, penulis membuat
identifikasi masalah sebagai berikut :
1. Penjualan pada UMKM otak-otak mamih masih di lakukan secara
langsung penjual dan pembeli.
2. Belum adanya sebuah web pemasaran maupun aplikasi di UMKM
Otak-Otak Mamih, sehingga pembeli kurang mengenal Otak-Otak
tersebut.
3. Bagaimana membuat dan mengimplementasikan sebuah sistem
pemasaran berbasis web di UMKM otak-otak Mamih yang dapat
membantu proses pemasaran antara penjual dan pembeli di manapun
tanpa harus membeli ke tempatnya langsung.
I-2
1.3. Batasan Masalah
Melihat dan mempertimbangkan luasnya bidang yang di hadapi, maka
dalam menyusun penelitian ini, penulis mencoba membuat ruang lingkup kegiatan
kompleks diantaranya :
1. Sistem web ini hanya di khususkan untuk menampilkan produk-produk
yang berbentuk gambar.
2. Proses pembaharuan data, gambar hanya dapat di lakukan oleh admin
dan tidak dapat dilakukan oleh pihak manapun .
3. Isi dari web ini adalah sebuah produk makanan, cara pemesanan, harga
sebuah produk makanan, cara pemesanan serta profil mana yang dapat
di perbaharui oleh admin atau pengguna.
4. Pengiriman hanya masih untuk daerah lokal cirebon
1.4. Tujuan
Tujuan dari pembuatan sebuah sistem pemasaran berbasis web ini adalah:
1. Memudahkan pemilik UMKM Otak-Otak Mamih untuk
mengembangkan usahanya.
2. Membangun sebuahwebsebagai media pemasaran produk Otak-Otak
Mamih.
3. Mengimplementasikan sebuah web yang dapat membantu pemasaran
antara penjual dan pembeli di wilayah Cirebon, tanpa harus membeli
langsung di tempat.
I-3
1.5. Metode Penelitian
Metode penelitian sangat diperlukan dalam suatu penelitian untuk
membantu dalam pengumpulan data-data yang dibutuhkan. Metode Penelitian
yang digunakan adalah sebagai berikut:
1.5.1. Metode Pengumpulan Data
1. Wawancara
Wawancara adalah suatu metode untuk mendapatkan data-data yang
diperlukan dengan cara tanya jawab.dengan pemilik usaha Otak-Otak
Mamih
2. Studi Kepustakaan
Studi kepustakaan adalah suatu metode untuk mengumpulkan data dengan
cara mencari informasi serta mempelajari dokumen tertentu yang berkaitan
dengan proyek ini.
1.5.2. Metode pengembangan perangkat lunak
Metode yang digunakan dalam pengembangan perangkat lunak pada
proyek ini menggunakan metode waterfall. Disebut dengan waterfall karena tahap
demi tahap yang dilalui harus menunggu selesainya tahap sebelumnya dan
berjalan berurutan[5] .Berikut ini merupakan Tahap-Tahapan Metode Waterfall :
I-4
Gambar 1.1.Metode Waterfall
1. Analisis Kebutuhan
Dalam analisa kebutuhan ini bertujuan untuk menganalisis kebutuhan
yang dibutuhkan dalam perancangan baik berupa dokumen maupun
sumber lain yang dapat membantu dalam menentukan solusi
permasalahan yang ada baik dari sisi user maupun admin.
2. Desain Sistem
Dalam Desain perangkat lunak menggunakan permodelan basis data
dengan menggunakan Use Case Diagram.
3. Penulisan Kode Program
Dalam tahap ini peneliti mulai membangun web sesuai dengan
analisis kebutuhan untuk membuat form input dan output dengan
aplikasi berbasis web dengan bahasa pemrograman framework
codeigniter.
4. Pengujian Program
Pada tahapan ini pengujian program dilakukan dengan menggunakan
Laptop dengan harapan bahwa perancangan yang sudah dibuat dapat
berjalan dengan sesuai kehendak.
5. Penerapan Program
Dalam proses pemeliharaan ini penulis mengupayakan pengembangan
sistem yang telah di rancang terkait software dan hardware dapat
dibuat maksimal agar aplikasi dapat berjalan dengan baik.
I-5
1.6. Sistematika Penulisan
Laporan ini terdiri dari beberapa bab dan pada setiap bab mempunyai pokok
bahasan . Berikut ini merupakan sistematika penulisan laporan ini:
BAB I. PENDAHULUAN
Bab ini menjelaskan latarbelakangmasalah, permasalahan, batasan
masalah, tujuan dan metode penelitian.
BAB II. LANDASAN TEORI
Bab ini menjelaskan tentang tinjauan pustaka, dasar teori, sistem
informasi, pemasaran, umkm, web, framework dan codeigniter.
BAB III. ANALISIS DAN PERANCANGAN
Dalam bab ini membahas tentang profil sebuah UMKM , Analisa
sistem, contoh kasus lalu perancangan yang menggunakan ERD, Use
case diagram, Activity diagram, Class Diagram dan Sequence
Diagram.
BAB IV. IMPLEMENTASI DAN PENGUJIAN SISTEM
Pada bab ini berisi tampilan-tampilan hasil dan penjelasan-penjelasan
dari sebuah web yang di buat.
BAB V. KESIMPULAN
Dalam bab ini, penyusun menyajikan tentang kesimpulan dan saran
untuk menunjang sistem web ini.
I-6
BAB II
LANDASAN TEORI
2.1. Tinjauan Pustaka
Dari hasil penelitian, sebagai penunjang dalam pembuatan web ini, penulis
menggunakan beberapa referensi ilmiah sebagai landasan mengenai sistem
informasi pemasaran. Berikut merupakan uraian singkat mengenai referensi yang
di gunakan, yaitu Analisis Dan Desain Sistem Informasi Pemasaran merupakan
jurnal referensi yang pembahasannya yaitu berfokus pada pemasaran atau promosi
sebuah catering berbasis web yang dimana customer dapat memesan catering ini
lewat web nya . Sistem informasi pemasaran merupakan salah satu bentuk sistem
informasi yang lebih menuju pada area fungsional bisnis, yaitu pada bagian
pemasaran. Sistem ini menyediakan informasi yang dibutuhkan oleh perusahaan
untuk mendukung pengambilan keputusan pemasaran dan menyediakan informasi
yang dibutuhkan oleh pihak yang mempunyai kepentingan (stakeholder) seperti,
pelanggan. Sistem informasi pemasaran memanfaatkan teknologi informasi untuk
mendukung fungsi bisnis pemasaran perusahaan terutama pada bagian promosi.
[1]. Analisis Sistem Informasi Pemasaran Produk Berbasis Web Dengan
Pemodelan UML.ini merupakan jurnal yang berfokus pada pemasaran
menggunakan UML dan menggunakan free web CMS yaitu wordpres sistem
informasi pemasaran berbasis web ini diharapkan mampu lebih meningkatkan
dalam memperkenalkan berbagai macam aksesoris dan pernak pernik yang
II-1
berbahan dari kerang laut kepada masyarakat, serta memperluas jangkauan
penjualan produk yang dapat terjangkau oleh siapapun, dimana dan kapanpun,
sehingga dapat mempermudah konsumen dalam bertransaksi. [2]. Dari kedua
jurnal diatas yang di gunakan dalam referensi landasan untuk mempermudah
penulis, hanya sebatas sebuah teori. Dan dari salah satu jurnal, penulis
berkesempatan untuk mengembangkan suatu web pemasaran UMKM Otak-Otak
Mamih.
2.2. Dasar Teori
2.2.1. Sistem Informasi
Sistem informasi adalah kombinasi terorganisasir yang terdiri dari orang,
hardware, software, jaringan komunikasi, sumber data, dan kebijakan serta
prosedur yang menyimpan, mendapatkan, merubah, dan menyalurkan informasi di
dalam suatu organisasi [1].
Menurut Tejoyuwono (2006), sistem informasi merupakan suatu
pengumpulan data yang terorganisasi beserta tata cara penggunaannya yang
mencakup lebih jauh daripada sekedar penyajian. Istilah tersebut menyiratkan
suatu maksud yang ingin dicapai dengan jalan memilih dan mengatur data serta
menyusun tata cara penggunaannya. Keberhasilan suatu sistem informasi yang
diukur berdasarkan maksud pembuatannya bergantung pada tiga faktor utama,
yaitu (1) keserasian dan mutu data, (2) pengorganisasian data, dan (3) tata cara
penggunaannya. Menurut Tejoyuwono (2006), setiap sistem informasi
menyajikan tiga aspek pokok: (1) pengumpulan dan pemasukan data, (2)
II-2
penyimpanan dan pengambilan kembali (retrieval) data, dan (3) penerapan data,
yang dalam hal sistem informasi termasuk penayangan (display) data [15].
2.2.2. Pemasaran
Pemasaran dapat di definisikan sebagai proses penyusunan komunikasi
terpadu yang bertujuan untuk memberikan informasi mengenai barang atau jasa
dalam kaitannya dengan memuaskan kebutuhan dan keinginan calon pelanggan.
[3]
Menurut Kotler (2008) mendefinisikan pemasaran sebagai suatu
rangkaian tujuan dan sasaran, kebijakan dan aturan yang menjadi arah kepada
usaha-usaha pemasaran perusahaan dalam menghadapi lingkungan dan keadaan
pesaing yang selalu berbeda. pemasaran merupakan suatu proses sosial manajerial
yang di dalamnya individu dan kelompok mendapatkan apa yang mereka
butuhkan dan inginkan dengan menciptakan, menawarkan dan mempertukarkan
produk yang bernilai dengan pihak lain. konsep ini yang mendasari definisi
pemasaran diantaranya: kebutuhan (needs), keinginan (want) dan permintaan
(demands) [14].
Pemasaran adalah suatu proses sosial yang didalamnya individu atau
kelompok mendapatkan apa yang mereka butuhkan dan inginkan dengan
menciptakan, menawarkan, dan secara bebas mempertukarkan produk yang
bernilai dari pihak lain. Pemasaran bukanlah semata-mata kegiatan menjual
produk dan jasa, namun didalam pemasaran harus ada kerjasama yang baik antar
bagian agar tercapai pemasaran yang efektif
II-3
Menurut Chandra (2002:93), strategi pemasaran merupakan rencana yang
menjabarkan ekspektasi perusahaan akan dampak dari berbagai aktivitas atau
program pemasaran terhadap permintaan produk atau lini produknya di pasar
sasaran tertentu. Program pemasaran meliputi tindakan-tindakan pemasaran yang
dapat mempengaruhi permintaan terhadap produk, diantaranya dalam hal
mengubah harga, memodifikasi kampanye iklan, merancang promosi khusus,
menentukan pilihan saluran distribusi, dan sebagainya.
2.2.2.1. Konsep Bauran Pemasaran (Marketing Mix)
Menurut Kotler dan Armstrong (2004:78) bauran pemasaran (marketing
mix) adalah kumpulan alat pemasaran taktis terkendali yang dipadukan
perusahaan untuk menghasilkan respon yang diinginkannya di pasar sasaran.
Bauran sasaran terdiri dari empat kelompok variable yang diserbut “4P” yaitu:
1. Product/Produk Produk berarti kombinasi barang dan jasa yang
ditawarkan perusahaan kepada pasar sasaran. Elemen-elemen yang termasuk
dalam bauran produk antara lain ragam produk, kualitas, design, fitur, nama
merek, kemasan, serta layanan.
2. Price/Harga Harga adalah jumlah uang yang harus dibayarkan
pelanggan untuk memperoleh produk. Harga adalah satu-satunya unsur bauran
pemasaran yang menghasilkan pendapatan, sedangkan unsur-unsur lainnya
menghasilkan biaya. Harga adalah unsur bauran pemasaran yang paling mudah
disesuaikan dan membutuhkan waktu yang relatif singkat, sedangkan ciri-ciri
produk, saluran distribusi, bahkan promosi membutuhkan lebih banyak waktu.
II-4
3. Place/Tempat Tempat atau saluran pemasaran meliputi kegiatan
perusahaan yang membuat produk tersedia bagi pelanggan sasaran. Saluran
distribusi adalah rangkaian organisasi yang saling tergantung yang terlibat dalam
proses untuk menjadikan suatu produk atau jasa siap untuk digunakan atau
dikonsumsi. Saluran distribusi dapat didefinisikan sebagai himpunan perusahaan
dan perorangan yang mengambil alih hak atau membantu dalam pengalihan hak
atas barang atau jasa tertentu selama barang atau jasa tersebut berpindah dari
produsen ke konsumen (Kotler, 2005).
4. Promotion/Promosi Promosi berarti aktivitas yang menyampaikan
produk dan membujuk pelanggan untuk membelinya. Definisi promosi menurut
Kotler (2005) adalah berbagai kegiatan yang dilakukan oleh produsen untuk
mengomunikasikan manfaat dari produknya, membujuk, dan mengingatkan para
konsumen sasaran agar membeli produk tersebut
2.2.3. UMKM
Pada Bab I pasal 1 UU No 20 Tahun 2008 tentang Usaha Mikro, Kecil,
dan Menengah (UMKM), maka yang dimaksud dengan Usaha Mikro, Kecil, dan
Menengah adalah:
1) Usaha Mikro adalah usaha produktif milik orang perorangan dan/atau
badan usaha perorangan yang memenuhi kriteria Usaha Mikro
sebagaimana diatur dalam Undang-Undang ini.
2) Usaha Kecil adalah usaha ekonomi produktif yang berdiri sendiri,
yang dilakukan oleh orang perorangan atau badan usaha yang bukan
merupakan anak perusahaan atau bukan cabang perusahaan yang
dimiliki, dikuasai, atau menjadi bagian baik langsung maupun tidak
II-5
langsung dari Usaha Menengah atau Usaha Besar yang memenuhi
kriteria Usaha Kecil sebagaimana dimaksud dalam Undang-Undang
ini.
3) Usaha Menengah adalah usaha ekonomi produktif yang berdiri sendiri,
yang dilakukan oleh orang perorangan atau badan usaha yang bukan
merupakan anak perusahaan atau cabang perusahaan yang dimiliki,
dikuasai, atau menjadi bagian baik langsung maupun tidak langsung
dengan Usaha Kecil atau Usaha Besar dengan jumlah kekayaan bersih
atau hasil penjualan tahunan sebagaimana diatur dalam
UndangUndang ini.
Berdasarkan definisi di atas maka pada intinya Usaha Mikro, Kecil,
dan Menengah adalah suatu bentuk usaha ekonomi produktif yang
dilakukan oleh orang perseorangan atau badan usaha perorangan yang
memenuhi kriteria Usaha Mikro, Kecil, dan Menengah [7].
2.2.4. WEB
Web server adalah sebuah program atau applikasi yang menggunakan
model klien/server dan world (HTTP), melayanin file yang berbentuk halaman
web untuk pengguna web (merespon permintaan computer klien berisi permintaan
(HTTP) [4].
2.2.5. Framework
Framework adalah paket berisi fungsi-fungsi yang biasa digunakan
dalam pembuatan aplikasi. Beberapa contoh fungsi standar yang biasa ada sebuah
II-6
Framework misalnya : email, paging, kalender, tanggal, bahasa, upload file,
session, validasi form, Tabel, manipulasi Gambar, text, string, captcha, enkripsi,
proteksi terhadap XSS, security dan lain-lain. Fungsi-fungsi tersebut dapat segera
digunakan dengan cara memanggilnya pada program [5].
2.2.6. Codeigniter
CodeIgniter merupakan sebuah framework yang dibuat dengan
menggunakan bahasa PHP, yang dapat digunakan untuk pengembangan web
secara cepat. Adapun framework sendiri dapat diartikan sebagai suatu struktur
pustaka-pustaka, kelas-kelas dan infrastruktur run-time yang dapat digunakan oleh
programmer untuk mengembangkan aplikasi web secara cepat. Tujuan
penggunaan framework adalah untuk mempermudah pengembang web
mengembangkan aplikasi web yang robust secara cepat tanpa kehilangan
fleksibilitas [6].
2.3. Sublime Text
Sublime Text merupakan salah satu text editor yang sangat powerful yang
dapat meningkatkan produktivitas dan mengembangkan kualitas kode yang tinggi
[10].
II-7
2.4. Xampp
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem
operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai
server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP
Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa
pemrograman PHP dan Perl. [11].
2.5. PHP (Hypertext Processor)
PHP merupakan singkatan dari “PHP : Hypertext Preprocessor”, dan
merupakan bahasa yang disertakan dalam dokumen HTML, sekaligus bekerja di
sisi server (server-side HTML-embedded scripting). Artinya sintaks dan perintah
yang diberikan akan sepenuhnya dijalankan di server tetapi disertakan pada
halaman HTML biasa, sehingga script-nya tak tampak disisi client. [11].
2.6. HTML(Hyper Text Mark Up Language)
HTML (Hyper Text Mark Up Language) merupakan bahasa yang digunakan
untuk mendeskripsikan struktur sebuah halaman web. HTML berfungsi untuk
mempublikasi dokumen online. Statement dasar dari HTML disebut tags. Sebuah
tag dinyatakan dalam sebuah kurung siku (<>). Tags yang ditujukan untuk sebuah
dokumen atau bagian dari suatu dokumen haruslah dibuat berupa pasangan.
Terdiri dari tag pembuka dan tag penutup. Dimana tag penutup menggunakan
tambahan tanda garis miring (/) di awal nama tag. [10].
II-8
2.7. MySQL
MySQL adalah salah satu jenis database yang banyak digunakan untuk
membuat aplikasi berbasis web yang dinamis. MySQL termasuk jenis RDBMS
(Relational Database Management Sistem). MySQL ini mendukung Bahasa
pemrograman PHP. MySQL juga mempunyai query atau bahasa SQL(Structured
Query Language) yang simple dan menggunakan escape character yang sama
dengan PHP. [10].
2.8. CSS
CSS kepanjangan dari Cascading Style Sheet adalah bahasa-bahasa yang
merepresentasikan halaman web. Seperti warna, layout, dan font. Dengan
menggunakan CSS, seorang web developer dapat membuat halaman web yang
dapat beradaptasi dengan berbagai macam ukuran layar. Pembuatan CSS biasanya
terpisah dengan halaman HTML. Meskipun CSS dapat disisipkan di dalam
halaman HTML. Hal ini ditujukan untuk memudahkan pengaturan halaman
HTML yang memiliki rancangan yang sama. [10].
II-9
2.9. Fungsi Web
Web mempunyai fungsi yang bermacam-macam, tergantung dari tujuan
dan jenis web yang dibangun, tetapi secara garis besar dapat berfungsi sebagai
[12].
1. Media Promosi : Sebagai media promosi dapat dibedakan menjadi
media promosi utama, misalnya website yang berfungsi sebagai
search engine atau toko Online, atau sebagai penunjang promosi
utama, namun website dapat berisi informasi yang lebih lengkap
daripada media promosi offline seperti koran atau majalah [12].
2. Media Pemasaran : Pada toko online atau system afiliasi, website
merupakan media pemasaran yang cukup baik, karena dibandingkan
dengan toko sebagaimana di dunia nyata, untuk membangun toko
online diperlukan modal yang relatif lebih kecil, dan dapat beroperasi
24 jam walaupun pemilik website tersebut sedang istirahat atau
sedang tidak ditempat, serta dapat diakses darimana saja [12].
3. Media Informasi : Website portal dan radio atau tv online
menyediakan informasi yang bersifat global karena dapat diakses dari
mana saja selama dapat terhubung ke internet, sehingga dapat
menjangkau lebih luas daripada media informasi konvensional seperti
koran, majalah, radio atau televisi yang bersifat local [12].
4. Media Pendidikan : Ada komunitas yang membangun website
khusus berisi informasi atau artikel yang sarat dengan informasi
ilmiah misalnya Wikipedia [12].
5. Media Komunikasi Sekarang banyak terdapat website yang dibangun
II-10
khusus untuk berkomunikasi seperti forum yang dapat memberikan
fasilitas bagi para anggotanya untuk saling berbagi informasi atau
membantu pemecahan masalah tertentu [12].
2.10. Otak-Otak
Otak-otak merupakan produk pengolahan dari daging ikan yang dicampur
dengan tapioka dan bumbu yaitu: santan, garam, gula, lada, bawang putih, dan
bawang merah. Formula otak-otak menggunakan bahan pengikat terigu dan
tapioka dapat dikatakan paling disukai, karena menghasilkan produk tidak
berbeda nyata nilai warnanya [13].
2.11. Teori UML
Menurut Windu Gata, Grace (2013:4), Unified Modeling Language
(UML) adalah bahasa spesifikasi standar yang dipergunakan untuk
mendokumentasikan, menspesifikasikan dan membangun perangkat lunak. UML
merupakan metodologi dalam mengembangkan sistem berorientasi objek dan juga
merupakan alat untuk mendukung pengembangan sistem [8].
2.11.1. Use Case Diagram
Use case diagram merupakan pemodelan untuk kelakuan (behavior)
sistem informasi yang akan dibuat. Use case digunakan untuk mengetahui fungsi
apa saja yang ada di dalam sistem informasi dan siapa saja yang berhak
menggunakan fungsi-fungsi tersebut. Simbol-simbol yang digunakan dalam Use
Case Diagram yaitu: [8]
II-11
Tabel 2.1. Use Case Diagram
NO Simbol Nama Keterangan
Use Case menggambarkan

fungsionalitas yang
disediakan sistem sebagai
1 Use Case unit-unit yang bertukar
pesan antar unit dengan
aktir, yang dinyatakan
dengan menggunakan kata
kerja
Actor atau Aktor adalah
Abstraction dari orang atau
2 Actor sistem yang lain yang
mengaktifkan fungsi dari
target sistem.
Asosiasi antara aktor dan use

case, digambarkan dengan
garis tanpa panah yang
3 Association mengindikasika n siapa atau
apa yang meminta interaksi
secara langsung dan
bukannya mengindikasikan
data
Asosiasi antara aktor dan use
Generalizatio case yang menggunakan
4 panah terbuka untuk
n mengindikasikan bila aktor
berinteraksi secara pasif
dengan sistem
Include, merupakan di dalam
use case lain (required) atau
5 Include pemanggilan use case oleh
use case lain, contohnya
adalah pemanggilan sebuah
fungsi program
Extend, merupakan
6 Extends perluasan dari use case lain
jika kondisi atau syarat
II-12
II-13
2.11.2. Activity Diagram
Activity Diagram menggambarkan workflow (aliran kerja) atau aktivitas
dari sebuah sistem atau proses bisnis [9]
Tabel 2.2. Activity Diagram
Status awal aktivitas

Initial Node sistem, sebuah diagram
1 aktivitas memiliki
sebuah status awal
Status akhir yang
dilakukan sistem,
Final Node
sebuah diagram
2
aktivitas memiliki
sebuah status akhir.
Aktivitas yang
dilakukan sistem,
Activities aktivitas biasanya
3 diawali dengan kata
kerja.
Asosiasi percabangan
Decision dimana jika ada pilihan
4 aktivitas lebih dari
Satu.
Asosiasi
penggabungan dimana
Join
lebih dari satu aktivitas
5
digabungkan menjadi
satu
Pemecah sebuah
Fork behaviour menjadi
6 activity atau action
yang paralel
II-14
Menunjukkan
bagaimana kendali
Control Flow
7 semua aktivitas terjadi
pada aliran kerja dalam
tindakan tertentu.
2.11.3. Sequence Diagram
Sequence Diagram menggambarkan kelakuan objek pada use case
dengan mendeskripsikan waktu hidup objek dan pesan yang dikirimkan dan
diterima antar objek. [8]. Berikut adalah simbol- simbol sequence diagram :
Tabel 2.3. Sequence Diagram
Entity Class, merupakan

bagian dari sistem yang
berisi kumpulan kelas
1 Entity Class berupa entitas-entitas yang
membentuk gambaran awal
sistem dan menjadi landasan
untuk menyusun basis data
Boundary Class, berisi

kumpulan kelas yang
Boundary menjadi interfaces atau
2 interaksi antara satu atau
Class lebih aktor dengan sistem,
seperti tampilan form entry
dan form cetak
Control class, suatu objek
yang berisi logika aplikasi
Control yang tidak memiliki
3 tanggung jawab kepada
Class entitas, contohnya adalah
kalkulasi dan aturan bisnis
yang melibatkan berbagai
objek
4 Message Message, simbol mengirim

pesan antar class
II-15
5 Recrusive Recursive, menggambarkan
pengiriman pesan yang
dikirim untuk dirinya sendiri
Actor Adalah
6 Actor menggambarkan orang yang
sedang berinteraksi
Lifeline, garis titik-titik yang
7 Lifeline terhubung dengan objek,
sepanjang lifeline terdapat
activation
2.11.4. Class Diagram
Class diagram menggambarkan struktur sistem dari segi pendefinisian
kelas-kelas yang akan dibuat untuk membangun sistem. Kelas memiliki apa yang
disebut atribut dan metode atau operasi [9]. Berikut adalah simbol- simbol class
diagram :
Tabel 2.4. Class Diagram
1 Class
Kelas pada struktur sistem.
Sama dengan konsep

2 Interface interface dalam
pemrograman berorientasi
objek.
Relasi antar kelas dengan

3 Association makna umum, asosiasi
biasanya juga disertai
dengan multiplicity.
II-16
Directed
makna kelas yang satu
4
digunakan oleh kelas yang
association
lain, asosiais biasanya juga
disertai dengan multiplicity

5 Generalization makna generalisasi-
generalisasi- spesialisasi
(umum khusus).

6 Depedency
makna kebergantungan antar
kelas

7 Aggregation
makna semua- bagian
(whole- part).
II-17
BAB III
ANALISIS DAN PERANCANGAN
3.1. Gambaran Umum Perusahaan/Studi Kasus
UMKM Otak-otak mamih di dirikan oleh seorang mahasiswa kelas
karyawan yang bernama Agung Faisal, Usaha ini berdiri dari bulan juli 2020,
awalnya bisa mendirikan usaha ini karena efek dari pandemi covid-19 dan
mengakibatkan pembelajaran dari kuliahnya harus dilaksanakan secara
online(Daring), maka dari itu beliau mencoba membangun usahanya yang
dimodalkan oleh orang tuanya, dan beliau bekerja seorang diri dimulai dari jam
13.00 – 21.00.
3.1.1. Struktur Organisasi
Gambar 3.1 Struktur Organinsai UMKM Otak-Otak Mamih
Owner
Agung Faisal
Karyawan
Teguh
III-1
Struktur organisasi pada umumnya digambarkan dalam suatu bagan yang disebut
bagan organisasi. Bagan organisasi adalah gambar struktur organisasi yang
formal. Dalam gambar tersebut ada garis-garis (instruksi dan koordinasi) yang
menunjukkan kewenangan dan hubungan komunikasi formal, yang tersusun
secara hierarkis. Manusia merupakan unsur terpenting dalam pengorganisasian.
1. Owner, Agung Faisal selaku owner di UMKM Otak-Otak Mamih , bertugas
sebagai pengawas, pengelola dan bertanggung jawab terhadap pengambilan
keputusan yang terkait dengan seluruh aktivitas di UMKM Otak-Otak Mamih.
2. Karyawan, Teguh sebagai karyawan dalam menjalankan aktivitas produksi,
mulai dari proses penggorengan hingga pengemasan produk.
3.2. Analisis Sistem
Analisis sistem dapat di definisikan sebagai penguraian dari suatu sistem
informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk
mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, kesempatan-
kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang di
harapkan sehingga dapat diusulkan perbaikan-perbaikannya. Hal-hal yang akan
dianalisis pada tahap analisis sistem ini adalah analisis prosedur sistem yang
sedang berjalan,analisis aliran informasi, analisis pengkodean, analisis basis data
dan analisis kebutuhan nonfungsional.
III-2
3.2.1. Analisis Masalah
Pada sistem yang sedang berjalan ditemukan masalah atau kendala yang
terjadi, masalah tersebut antara lain adalah :
Tabel 3.1. Masalah atau kendala perusahaan
No Permasalahan Bagian/Pihak
Belum adanya sebuah web

1. pemasaran maupun aplikasi di Perusahaan
UMKM otak-otak mamih.
Sistem promosi saat ini

membutuhkan waktu yang
2. cukup panjang dan dapat Perusahaan
mengeluarkan biaya yang
cukup besar.
Dengan keadaan yang berjalan

sekarang pemberian informasi
3. kepada pembeli kurang efektif Pembeli
tidak ada interaksi untuk
membeli otak-otak tersebut.
3.2.2. Analisis Prosedur Yang Sedang Berjalan
Ditinjau dari masalah yang di hadapi oleh pemilik Umkm maka di bangun
sebuah web untuk mengatasi masalah-masalah tersebut web ini di buat bertujuan
untuk dapat di kembangkan lagi.
3.2.3. Analisis Kebutuhan Fungsional
Dalam hal analisis kebutuhan fungsional ini untuk mengembangkannya
menggunakan UML (Unified Modeling Language) yang di gunakan dalam
perancangan sebuah web antara lain dengan Use Case Diagram, Activity
Diagram, Class Diagram dan Sequence Diagram.
III-3
3.2.4. Analisis Kebutuhan Non Fungsional
Analisis kebutuhan non fungsional merupakan analisis yang dibutuhkan
untuk menentukan spesifikasi kebutuhan sistem. Spesifiikasi ini juga meliputi
elemen-elemen atau komponen-komponenapa saja yang dibutuhkan untuk sistem
yang akan dibangun sampai dengan sistem tersebut diimplementasikan. Analisis
kebutuhan ini juga menentukan spesifikasi masukan yang diperlukan sistem,
keluaran yang akan dihasilkan sistem dan proses yang akan dibutuhkan untuk
mengolah masukan sehingga menghasilkan suatu keluaran yang diinginkan.
Berikut ini merupakan kebutuhan non fungsionalnya:
3.2.4.1. Analisis Perangkat Keras (Hardware)
Perangkat keras yang di butuhkan untuk menjalankan web tersebut
adalah sebagai berikut :
1. Processor Pentium IV 1.0 GHz
2. RAM 1 GB
3. Mouse
4. Keyboard
5. VGA Card 512 MB
3.2.4.2. Analisis Perangkat Lunak
Kebutuhan perangkat lunak merupakan faktor-faktor yang harus
dipenuhi untuk merancang sebuah perancang lunak tersebut sesuai dengan
maksud dan tujuan perangkat lunak tersebut dibuat.Beberapa perangkat lunak
pendukung sebagai berikut:
III-4
1. Sistem Operasi : Windows 7,8 dan 10.
2. Browser : Google Chrome, Mozila Firefox.
3. Web Server : Xampp
4. Text Editor : Subliime dan VS Code
3.3. Perancangan
Pada proses perancangan ini menjelaskan tentang proses pembuatan sistem
web yang di bangun. Perancangan system ini menggunakan 2 pendekatan yang
berbeda tetapi tidak dapat di campur. Yaitu pendekatan struktural dan pendekatan
berorientasi objek. Pendekatan Struktural adalah sebuah gambaran sistem yang
menjelaskan cara kerja program atau sistem yang di buat, pendekatan
strukturalnya yaitu Entity Relationship Diagram. Sedangkan pada pendekatan
berorientasi objek ini menjelaskan cara kerja sebuah web yang akan di buat
menggunakan diagram UML. Pendekatan berorientasi objek terdiri dari; Use
Case Diagram, Activity Diagram, Class Diagram, Sequence Diagram.
3.3.1. Flowchart
Flowchart adalah representasi secara simbolik dari suatu algoritma atau
prosedur untuk menyelesaikan suatu masalah, dengan menggunakan flowchart
akan memudahkan pengguna melakukan pengecekan bagian-bagian yang
terlupakan dalam analisis masalah, disamping itu flowchart juga berguna sebagai
fasilitas untuk berkomunikasi antara pemrogram yang bekerja dalam tim suatu
proyek.
III-5
Gambar 3.1. Flowchart alur sistem yang berjalan
Pada gambar diatas menggambarkan sistem yang berjalan di otak-otak mamih
sebagai berikut :
1. Pedagangmembuat informasi tentang produk
2. Pedagangmenjualkan produkmya.
3. Customer datang ke tempatnya langsung.
4. customer memilih dan memesan sebuah produknya.
5. Produk sudah siap di sajikan.
III-6
3.3.2. Use Case Diagram
Use Case Diagram merupakan pemodelan untuk kelakuan (behavior)
sistem informasi yang akan dibuat. Use Case digunakan untuk mengetahui fungsi
apa saja yang ada di dalam sistem informasi dan siapa saja yang berhak
menggunakan fungsi-fungsi tersebut. Berikut ini merupakan Use Case Diagram
yang dibuat penulis untuk merancang web UMKM Otak-Otak Mamih :
a. Use Case DiagramAdmin
Gambar 3.2. Use Case Diagram Admin
III-7
b. Use Case Diagram Customer / Pembeli
Gambar 3.3. Use Case Diagram Costumer / Pembeli
c. Pendefinisian Aktor
Tabel 3.2. Pendefinisian Aktor
No Aktor Deskripsi
Admin merupakan orang yang mempunyai
1. Admin akses untuk mengelola data produk, data
pembeli, dan memverifikasi pembayaran
Customer / Pembeli merupakan orang yang dapat melihat

2.
Pembeli dan memesan produk lewat web
III-8
d. Pendefinisian Use Case Diagram Admin
Tabel 3.3. Skenario Use Case Login Admin
Identifikasi
No. Use Case 1
Nama Use Case Login
Aktor Admin
No Aksi Aktor No Tanggapan Sistem
Mengisi username dan
1 password pada inputan
halaman login.
Memverifikasi username
2 dan password dengan data
didatabase.
Jika username dan
password terdaftar maka
akan langsung menuju
dasboard admin, jika tidak
3
sistem akan menampilkan
notifikasi username /
password salah dan tetap
berada di Halaman login
Tabel 3.4. Skenario Use Case Dashboard Admin
Identifikasi
No. Use Case 2
Nama Use Case Dashboard Admin
Aktor Admin
Memilih menu pada
1
DashboardAdmin
Menampilkan isi menu
yang ada di Dashboard
Admin, seperti
2 menampilkan data produk,
data kategori, data
customer, dan verifikasi
III-9
pembayaran
Tabel 3.5. Skenario Use Case Mengelola Data Produk
Identifikasi
No. Use Case 3
Nama Use Case Mengelola Data Produk
Aktor Admin
Memilih menu Data Produk
1
pada DashboardAdmin
2
yang ada di data produk
Memilih “Tambah Data”
3 untuk menambahkan data
produk baru
Menampilkan form input
produk
Memilih “Simpan Data
Produk” untuk menambahkan
5
data produk baru ke dalam
database
Menyimpan data produk
baru ke dalam database dan
6
sistem mengembalikan ke
tampilan menu data produk
Memilih “Edit” untuk
7
mengubah isi data produk
untuk mengubah data
8
produk beserta isi data
produk yang akan diubah
Memilih “Edit Data Produk”
untuk menyimpan data
9
produk yang sudah diubah ke
dalam database
III-10
yang telah diubah ke dalam
10 database dan sistem
mengembalikan ke
Memilih “Hapus” untuk
11
menghapus data produk
Menampilkan peringatan
untuk memberitahu admin
11
bahwa data produk akan
dihapus
Memilih “Ok” untuk
12 konfirmasi data produk yang
akan dihapus
Menghapus data produk
yang di dalam database dan
13
sistem mengembalikan ke
Tabel 3.6. Skenario Use Case Kelola Data Kategori
Identifikasi
No. Use Case 4
Nama Use Case Kelola Data Kategori
Aktor Admin
Memilih menu Data Kategori
1
pada Dashboard Admin
2 yang ada di data kategori
Memilih “Tambah Data”

kategori baru

untuk menambahkan data
4 kategori
III-11
Memilih “Simpan Data
Kategori” untuk
5
menambahkan data kategori
baru ke dalam database
baru ke dalam database dan
6 sistem mengembalikan ke
tampilan menu data
kategori
7 mengubah isi data kategori

untuk mengubah data
8 kategori beserta isi data
kategori yang akan diubah
Memilih “Edit Data

Kategori” untuk menyimpan
9
data produk yang sudah
diubah ke dalam database
Menyimpan data kategori
database dan sistem
10
mengembalikan ke
tampilan menu data
kategori

11
menghapus data kategori
12
bahwa data kategori akan
dihapus

13 konfirmasi data kategori yang
akan dihapus

tampilan menu data
kategori
III-12
Tabel 3.7. Skenario Use Case Kelola Data Customer
Identifikasi
No. Use Case 5
Nama Use Case Kelola Data Customer
Aktor Admin
Memilih menu Data
1 Customer pada Dashboard
Admin
2
yang ada di data customer
3 mengubah isi data Customer

untuk mengubah data
4 customer beserta isi data
customer yang akan diubah
Memilih “Edit Data

Customer” untuk menyimpan
5
data produk yang sudah
diubah ke dalam database
Menyimpan data Customer
database dan sistem
6
mengembalikan ke
tampilan menu data
Customer

7
menghapus data Customer
8 bahwa data Customer akan
dihapus
III-13
9 konfirmasi data Customer
yang akan dihapus

tampilan menu data
Customer
Tabel 3.8. Skenario Use Case Verifikasi Pembayaran
Identifikasi
No. Use Case 6
Nama Use Case Verifikasi Pembayaran
Aktor Admin
Memilih menu Verifikasi
1 Pembayaran pada
DashboardAdmin
2 yang ada di Verifikasi
Pembayaran
Memilih “Verifikasi” untuk
3 memverifikasi data
pembayaran Customer
Menampilkan form yang
4 berisi data pembayaran
yang akan diverifikasi
III-14
Tabel 3.9. Scenario Use Case Cetak Laporan
Identifikasi
No. Use Case 7
Nama Use Case Cetak Laporan
Aktor Admin
Memilih “Cetak” untuk
1 mencetak data pembayaran
Customer
Menampilkan halaman
print laporan pembayaran
2 customer
Tabel 3.10. Scenario Use Case Logout
Identifikasi
No. Use Case 8
Nama Use Case Logout
Aktor Admin
Memilih “Logout” untuk
1
keluar dari Dashboard Admin
Sistem akan otomatis
keluar dari Dashboard
2 Admin ke Halaman awal
Web Otak-Otak Mamih
III-15
e. Pendefinisian Use Case Diagram Customer / Permbeli
Tabel 3.11. Scenario Use Case Lihat Produk
Identifikasi
No. Use Case 1
Nama Use Case Lihat Produk
Aktor Customer / Pembeli
Mengakses web Otak-Otak
1
Mamih
Menampilkan halaman
awal Web Otak-Otak
2 Mamih dan daftar produk
Otak-Otak Mamih
Tabel 3.12. Skenario Use Case Login Customer
Identifikasi
No. Use Case 2
Nama Use Case Login
Mengisi username dan
1 password pada inputan
halaman login.
Memverifikasi username
2 dan password dengan data
didatabase.
Jika username dan
password terdaftar maka
akan langsung menuju
Halaman Web Otak-Otak
3 Mamih, jika tidak sistem
akan menampilkan
notifikasi username /
password salah dan tetap
berada di Halaman login
III-16
Tabel 3.13.Skenario Use Case Menu Utama
Identifikasi
No. Use Case 3
Nama Use Case Menu Utama
Mengakses web Otak-Otak
1
Mamih setelah login
Menampilkan halaman
awal Web Otak-Otak
2 Mamih dan daftar produk
Otak-Otak Mamih
Tabel 3.14. Skenario Use Case Pilih Produk
Identifikasi
No. Use Case 4
Nama Use Case Pilih produk
Memilih produk yang akan
1
dibeli
Menampilkan halaman
2 detail produk yang telah
dipilih
III-17
Tabel 3.15. Skenario Use Case Pesan Produk
Identifikasi
No. Use Case 5
Nama Use Case Pesan Produk
Menginputkan jumlah produk
1 yang akan dibeli dan
menekan tombol checkout
Memindahkan ke halaman
2 customer
3 Memilih menu “Checkout”
Menampilkan menu
4
checkout
Tabel 3.16. Skenario Use Case Bayar Pesanan
Identifikasi
No. Use Case 6
Nama Use Case Bayar Pesanan
Mengupload file bukti
1 pembayaran dan menekan
tombol “Bayar”
Jika upload berhasil maka
akan mengembalikan ke
halaman awal web otak-
2 otak mamih, dan
pembayaran tersimpan ke
database ,jika gagal akan
tetap di halaman checkout
III-18
Tabel 3.17. Skenario Use Case Lihat Keranjang Belanja
Identifikasi
No. Use Case 7
Nama Use Case Lihat Keranjang Belanja
Aktor Admin
Memilih menu Cart pada
1 halaman awal web Otak-Otak
Mamih
2
yang ada di Cart
Tabel 3.18. Skenario Use Case Lihat Status Pemesanan
Identifikasi
No. Use Case 8
Nama Use Case Lihat Status Pemesanan
Aktor Admin
Memilih menu Status Belanja
1 pada halaman awal web
Otak-Otak Mamih
2
yang ada di Status Belanja
III-19
3.3.3. Activity Diagram
Activity Diagram menggambarkan berbagai alur aktivitas dalam sistem
yang dirancang, bagaimana masing-masing alur berawal, decision yang mungkin
terjadi dan bagaimana mereka berakhir. Penggambaran activity diagram
memiliki kemiripan dengan flowchart diagram. Activity diagram memodelkan
event-event yang terjadi pada Use Case dan digunakan untuk pemodelan aspek
dinamis dari sistem Berikut ini merupakan Activity Diagram yang dibuat penulis
untuk merancang web UMKM Otak-Otak Mamih :
Gambar 3.4. Activity Diagram Admin
III-20
Gambar 3.5. Activity Diagram Customer
III-21
3.3.4. Sequence Diagram
Sequence Diagram adalah diagram yang digunakan untuk menggambarkan
interaksi antar objek dan komunikasi diantara objek-objek tersebut, juga
digunakan untuk menggambarkan perilaku dari sebuah skenario, dan memberikan
kejelasan sejumlah objek dan pesan-pesan yang diletakan diantaranya. Berikut ini
merupakan Sequence Diagram yang dibuat penulis untuk merancang web UMKM
Otak-Otak Mamih :
Gambar 3.6. Sequence Diagram Login Admin
Keterangan pada sequence diagram login admin sebagai berikut.
1. Admin memasukkan username dan password.
2. Sistem akan melakukan pengecekan ke sebuah database apakah
username dan password nya cocok maka sistem akan menampilkan
dashboard admin.
3. Jika username dan password tidak cocok maka akan muncul
peringantan gagal login.
III-22
Gambar 3.7. Sequence Diagram Admin Mengelola Data Customer
Keterangan pada sequence diagram admin mengelola data customer
sebagai berikut.
1. Admin memilih data customer maka sistem akan menampilkan
halaman data customer
2. Admin memilih menu hapus pada halaman data customer kemudia
sistem akan menghapus data customer yang sudah di hapus di
database
3. Sistem akan menampilkan halaman data customer.
III-23
Gambar 3.8. Sequence Diagram Admin Mengelola Data Produk
Keterangan pada sequence diagram admin mengelola data produk sebagai
berikut.
1. Admin memilih data produk maka sistem akan menampilkan halaman
data produk.
2. Admin memilih menu tambah pada halaman data produk kemudian
sistem akan menampilkan halaman tambah produk.
3. Admin input data produk kemudian sistem akan menyimpan data
produk ke database, sistem akan menampilkan halaman data produk.
4. Admin memilih menu update pada halaman data produk kemudian
sistem akan menampilkan halaman tambah produk.
5. Admin akan mengedit data produk kemudian sistem akan menyimpan
III-24
data produk yang sudah di edit ke database, sistem akan menampilkan
halaman data produk
6. Admin memilih menu hapus dihalaman data produk kemudian sistem
akan menampilkan pesan bahwa data berhasil dihapus.
7. Sistem akan menampilkan halaman data customer.
Gambar 3.9. Sequence Diagram Admin Mengelola Data Kategori
III-25
Keterangan pada sequence diagram admin mengelola data kategori
sebagai berikut.
1. Admin memilih data kategori maka sistem akan menampilkan halaman
data kategori.
2. Admin memilih menu tambah pada halaman kategori kemudian sistem
akan menampilkan halaman tambah kategori.
3. Admin input data kategori kemudian sistem akan menyimpan data
kategori ke database, sistem akan menampilkan halaman data kategori.
4. Admin memilih menu update pada halaman data kategori kemudian
sistem akan menampilkan halaman tambah kategori.
5. Admin akan mengedit data kategori kemudian sistem akan menyimpan
data kategori yang sudah di edit ke database, sistem akan
menampilkan halaman data kategori
6. Admin memilih menu hapus dihalaman data kategori kemudian sistem
akan menampilkan pesan bahwa data berhasil dihapus.
7. Sistem akan menampilkan halaman data kategori.
III-26
Gambar 3.10. Sequence Diagram Admin Mengelola Verifikasi Pembayaran Dan Mencetak
Laporan
Keterangan pada sequence diagram admin mengelola data pembayaran
sebagai berikut.
1. Admin memilih verifikasi pembayaran maka akan menampilkan
halaman verifikasi pembayaran
2. Admin memilih menu verifikasi pada halaman verifikasi pembayaran
kemudian sistem akan menampilkan halaman verifikasi.
3. Admin akan memilih pilihan verifikasi yaitu “terkonfirmasi” jika
customer sudah mengupload bukti bayar ke admin lalu verifkasi
III-27
pembayaran. Kemudian sistem akan menampilkan halaman verifikasi
pembayaran.
4. Admin memilih menu verifikasi pada halaman verifikasi pembayaran
kemudian sistem akan menampilkan halaman verifikasi.
5. Admin akan memilih pilihan verifikasi yaitu “ belum terkonfirmasi”
jika customer belum mengupload bukti bayar ke admin lalu verifkasi
pembayaran. Kemudian sistem akan menampilkan halaman verifikasi
pembayaran.
Gambar 3.11. Sequence Customer Register
Keterangan pada sequence diagram customer register sebagai berikut.
1. Customer memilih menu register pada halaman awal tampilan
produk.atau pada halaman login.
2. Sistem akan menampilkan halaman register.
3. Customer mengisi data diri.
III-28
4. Customer melakukan klik register.
5. Sistem akan menampilkan halaman login.
Gambar 3.12. Sequence Diagram Login Customer
Keterangan pada sequence diagram login customer sebagai berikut.
1. Customer memasukkan username dan password.
2. Sistem akan melakukan pengecekan ke sebuah database apakah
username dan password nya cocok maka sistem akan menampilkan
halaman customer.
3. Jika username dan password tidak cocok maka akan muncul
peringantan gagal login.
III-29
Gambar 3.13. Sequence Diagram Customer Membeli Sebuah Produk
Keterangan pada sequence diagram customer membeli produk sebagai
berikut.
1. Customer melihat produk pada halaman tampilan customer
2. Customer memilih produk.
3. Sistem akan menampilkan halaman produk yang tadi sudah dipilih
oleh customer
4. Customer mementukan berapa produk yang ingin di beli.
5. Customer memilih bumbu yang akan di campurkan pada produk. Lalu
klik add to cart
6. Sistem akan menampilkan halaman customer.
III-30
Gambar 3.14. Sequence Diagram Customer Melakukan Checkout Di Keranjang Belanja
Keterangan pada sequence diagram customer melakukan checkout di
keranjang belanja sebagai berikut.
1. Customer memilih menu chart pada halaman tampilan customer.
2. Sistem akan menampilkan halaman keranjang belanja.
3. Customer melakukan ceklis pada produk yang sudah tadi di pilih pada
halaman customer tadi.
4. Customer melakukan klik checkout.
III-31
Gambar 3.15. Sequence Diagram Customer Membayar Di Checkout
Keterangan pada sequence diagram customer membayar di checkout
sebagai berikut.
1. Customer memilih menu checkout pada halaman tampilan customer.
2. Sistem akan menampilkan halaman checkout.
3. Customer melakukan klik bayar pada produk yang sudah di pesan di
dalam keranjang.
III-32
Gambar 3.16. Sequence Diagram Customer Belum Melakukan Pembayaran
Keterangan pada sequence diagram customer belum melakukan
pembayaran sebagai berikut.
1. Customer memilih menu status belanja pada halaman tampilan
customer.
2. Sistem akan menampilkan halaman status belanja.
3. Jika customer belum melakukan upload pembayaran maka status
belanjanya masih menunggu verifikasi.
4. Sistem akan menampilkan halaman customer
III-33
Gambar 3.17. Sequence Diagram Customer Belum Melakukan Pembayaran
Keterangan pada sequence diagram customer belum melakukan
pembayaran sebagai berikut.
1. Customer memilih menu status belanja pada halaman tampilan
customer.
2. Sistem akan menampilkan halaman status belanja.
3. Jika customer sudah melakukan upload pembayaran maka sistem
admin akan merubah status belanjanya menjadi terkonfirmasi.
III-34
3.3.5. Class Diagram
Class Diagram adalah diagram UML (Unified Modelling Languange)
yang menggambarkan kelas-kelas yang berhubungan dengan sistem antara satu
dengan yang lain yang berisi atribut dan operasi. Berikut ini merupakan Class
Diagram yang dibuat penulis untuk merancang web UMKM Otak-Otak Mamih :
Gambar 3.18. Class Diagram
III-35
3.3.6. Perancangan Antar Muka (Graphical User Interface)
Perancangan antar muka adalah suatu sistem yang membuat para pengguna
atau user mampu berinteraksi dengan suatu perangkat komputer yang digunakan
oleh si user tersebut.
3.3.6.1. Perancangan Antar Muka Admin
1. Halaman Index admin
Gambar 3.19. Perancangan antar muka index admin
Pada gambar diatas yaitu ketika admin hendak mengakses websitenya
maka akan menampilkan beberapa menu dan gambar produk dengan harganya
dan menu beberapa porsi pada produk tersebut. Menu pada header di antara lain
adalah:
a. Cart : adalah sebuah keranjang belanja. ketika pembeli sudah
memilih produk yang ingin di belinya maka produk akan otomatis
masuk ke menu cart.
III-36
b. Checkout : adalah ketika sebuah produk yang sudah masuk ke
keranjang belanja maka pembeli tinggal membayarnya saja sesuai
dengan prudk yang di pesannya.
c. Status belanja : adalah sebuah menu yang berisi tentang produk yang
tadi di pesan dan total harga yang harus di bayar serta dengan menu
status belanja yaitu “Terkonfirmasi” dan “Menunggu Verifikasi”, jika
pembeli sudah membayar dan mengupload bukti bayar maka status
belanjanya menjadi “Terkonfirmasi”. Jika pembeli belum membayar
dan belum mengupload bukti bayar maka status belanjanya adalah
“Menunggu Verifikasi”.
d. No telp : pada nomor telepon itu jika ada ingin informasi lebih lanjut
maka bisa menghubungi nomor tersebut.
2. Halaman Login Admin
Gambar 3.20. Perancangan antar muka Login admin
III-37
Pada gambar diatas terdapat menu login admin yang terdiri dari beberapa
bagian yaitu :
a. Username dan password : yaitu inputan yang akan di jadikan data
untuk validasi agar dapat mengakses ke halaman admin.
b. Button login : ketika tombol login di klik maka sistem akan
melakukan validasi dan mencocokan data username dan password
pada database, Jika data cocok maka akan menampilkan halaman
admin. Jika gagal maka akan menampilkan pesan kesalahan
“username dan password salah
c. Jika belum mempunyai akun khususnya untuk customer maka bisa
mengklik “Daftar di sini” yang nantinya akan di arahkan ke halaman
register.
3. Dashboard Admin
Gambar 3.21. Perancangan antar muka dashboard admin
III-38
Setalah pengguna melakukan validasi pada halaman login dengan benar
dan levelnya admin. Maka akan di alihkan ke halaman dashboard admin Masih
menampilkan halaman kosong.
Pada Dashboard Admin terdapat beberapa menu antara lain adalah :
a. Produk Otak-Otak Mamih, yaitu berisi data lagi antara lain adalah
data produk dan kategori.
b. Data produk, yaitu di gunakan oleh admin untuk mengelola data
produk seperti hapus, edit dan tambah produk.
c. Kategori, yaitu di gunakan oleh admin untuk mengelola kategori pada
produk
d. Verifikasi pembayaran, yaitu di gunakan oleh admin untuk melakukan
verifikasi pembayaran ketika customer sudah membayar dan
mengirim bukti pembayaran.
4. Halaman Data Produk
Gambar 3.22. Perancangan antar muka halaman data produk
III-39
Halaman data produk merupakan halaman yang menampilkan dan
mengelola data produk. halaman ini terdiri dari beberapa bagian, seperti :
a. Button Tambah data
Button Tambah digunakan untuk menampilkan halaman tambah
produk yang digunakan untuk menambah data produk
b. Button Edit
Button edit digunakan untuk mengedit suatu produk yang sudah di
tampilkan di table data produk
c. Button Hapus
Button hapus di gunakan untuk mengahpus suatu data produk yang
tampil di data produk.
5. Halaman Tambah Data Produk
Gambar 3.23. Perancangan antar muka Tambah Data Produk
III-40
Halaman tambah produk digunakan untuk menambah data produk.
Halaman tambah produk terdiri dari beberapa bagian :
a. Button Simpan
Setelah semua form telah terisi lalu klik tombol simpan, maka data
tersebut tersimpan di tabel produk.
b. Button Reset
Button Reset di gunakan untuk membersihkan halaman form yang
telah di isi data tetapi tidak di simpan ke database
6. Halaman Edit Data Produk
Gambar 3.24. Perancangan antar muka Edit Data Produk
Halaman edit Data produkdigunakan untuk mengedit data produk.
Halaman edit data produkterdiri dari beberapa bagian :
a. Button Simpan
tersebut tersimpan di tabel produk.
III-41
b. Button Reset
7. Halaman Data Kategori
Gambar 3.25. Perancangan antar muka Data Kategori
Halaman data kategori merupakan halaman yang menampilkan dan
mengelola data kategori. halaman ini terdiri dari beberapa bagian, seperti :
a. Button Tambah data
Button Tambah digunakan untuk menampilkan halaman tambah
kategori yang digunakan untuk menambah data kategori
b. Button Edit
Button edit digunakan untuk mengedit suatu kategori yang sudah di
tampilkan di tabel data kategori
c. Button Hapus
Button hapus di gunakan untuk mengahpus suatu data kategori yang
tampil di data kategori.
III-42
8. Halaman Tambah Data Kategori
Gambar 3.26. Perancangan antar muka Data Kategori
Halaman tambah data kategori digunakan untuk menambah data kategori.
Halaman tambah kategori terdiri dari beberapa bagian :
a. Button Simpan
tersebut tersimpan di tabel kategori.
b. Button Reset
III-43
9. Halaman Edit Data Kategori
Gambar 3.27. Perancangan antar muka Edit Data Kategori
Halaman edit Data kategori digunakan untuk mengedit data kategori.
Halaman edit data kategori terdiri dari beberapa bagian :
a. Button Simpan
tersebut tersimpan di tabel kategori.
b. Button Reset
III-44
10. Halaman Data Customer
Gambar 3.28. Perancangan antar muka Data Customer
Halaman data Customer digunakan untuk mengecek customer yang sudah
register pada halaman register. Terdapat beberapa tabel yaitu username, nama
customer, email, nohandphone, negara dan action. Halaman register terdiri dari
beberapa bagian :
a. Button Hapus
Yaitu di gunakan untuk mengahapus suatu data customer yang ada di
tabel.
III-45
11. Halaman Data pembayaran customer
Gambar 3.29. Perancangan antar muka Data Pembayaran

Halaman data pembayaran customer merupakan halaman yang
menampilkan dan mengelola data pembayaran. halaman ini terdiri dari beberapa
bagian, seperti :
a. Button Verifikasi
Button verifikasi digunakan untuk menampilkan halaman verifikasi
pembayaran yang digunakan untuk mengelola konfirmasi
pembayaran.
III-46
12. Halaman Verifikasi Pembayaran
Gambar 3.30. Perancangan antar muka Data Pembayaran
Halaman verifikasi pembayaran customer merupakan halaman yang
menampilkan dan mengelola pembayaran. halaman ini terdiri dari beberapa
bagian, seperti :
a. Button konfirmasi pembayaran

Button konfirmasi pembayaran digunakan ketika admin sudah
melakukan pemilihan pada verifikasi pembayaran. Lalu klik
konfirmasi pembayaran maka akan menampilkan halaman data
pembayaran customer
b. Button Reset
III-47
3.3.6.2. Perancangan Antar Muka Customer
1. Halaman Register
Gambar 3.31. Perancangan antar muka Halaman Register
Halaman registrasi digunakan untuk mendaftar atau membuat akun
supaya dapat mengakses semua menu yang tersedia di website sebagai customer.
Halaman registrasi terdiri dari beberapa bagian :
a. Button Registrasi
Setelah semua form telah terisi lalu klik tombol registrasi, maka data
tersebut tersimpan di tabel customer.
III-48
2. Halaman Login Customer
Gambar 3.32. Perancangan antar muka Halaman Login Customer
Pada gambar 3. terdapat menu login admin yang terdiri dari beberapa
bagian yaitu :
a. Username dan password :yaitu inputan yang akan di jadikan data
untuk validasi agar dapat mengakses ke halaman admin.
b. Button login : ketika tombol login di klik maka sistem akan
melakukan validasi dan mencocokan data username dan password
pada database, Jika data cocok maka akan menampilkan halaman
admin. Jika gagal maka akan menampilkan pesan kesalahan
“username dan password salah
c. Jika belum mempunyai akun khususnya untuk customer maka bisa
mengklik “Daftar di sini” yang nantinya akan di arahkan ke halaman
register.
III-49
3. Halaman Detail Produk
Gambar 3.33. Perancangan antar muka Halaman Detail Produk
Pada halaman tersebut ketika customer sudah memilih produk lalu meng
klik button add to cart maka selanjutnya akan menuju ke halaman belanja
customer. Pada halaman tersebut terdapat bebearapa gambar produk, deksripsi
produk, harga produk. Dan jumlah produk yang ingin di beli. Halaman belanja
terdapat beberapa bagian diantaranya adalah :
a. Button add to chart : yaitu ketika customer sudah membaca
keterangan produk dan memesan beberapa produk yang di inginkan ,
maka tinggal klik add to chart maka produk tersebut akan tersimpan
di halaman keranjang belanja.
III-50
4. Halaman Cart
Gambar 3.34. Perancangan antar muka Halaman Cart
Pada halaman keranjang belanja tersebut terdapat beberapa tabel di
antaranya adalah item, nama produk, harga, jumlah, total dan aksi. Pada halaman
ini akan memunculkan sebuah produk yang tadi sudah di klik add to cart.
Halaman cart terdapat beberapa bagian di antaranya adalah :
a. Button Checkout : yaitu ketika customer ingin membeli produk nya
maka tinggal klik checkout maka otomatis produk tersebut akan
tersimpan di menu checkout.
b. Button Hapus : ketika customer tidak jadi ingin membelinya maka
tinggal klik hapus maka otomatis produk tersebut akan terhapus.
III-51
5. Halaman Checkout
Gambar 3.35. Perancangan antar muka Halaman Checkout
Pada halaman checkout ini terdapat beberapa tabel diantaranya adalah
item, nama produk, harga, jumlah, dan total, lalu di bawah tabel tersebut
terdapat beberapa kolom yaitu total belanja, ongkos kirim, total bayar dan
upload bukti pembayaran.
Pada keterangan tersebut pembayaran bisa lewat OVO/GOPAY/DANA, lalu
bisa juga menghubungi nomer telepon tersebut untuk konfirmasi lebih lanjut.
Halaman checkout terdapat beberapa bagian antara lain adalah :
a. Button bayar : yaitu ketika customer ingin membayar sebuah produk
maka tinggal klik bayar yang nanti nya akan terakses di halaman status
belanja.
b. Form upload : yaitu ketika customer sudah membayar maka tinggal
kirim foto bukti pembayarannya yaitu dengan klik upload lalu kirim
foto bukti pembayaran.
III-52
6. Halaman Status Belanja
Gambar 3.36. Perancangan antar muka Halaman Status Belanja
Pada halaman status belanja ini terdapat beberapa tabel diantaranya
adalam item, nama produk, harga, jumlah dan total lalu di bawah tabel tersebut
terdapat beberapa colom yaitu total belanja, ongkos kirim, total bayar dan upload
bukti pembayaran. Pada keterangan tersebut yaitu “status belanja anda :
menunggu verifikasi” yaitu dimana customer harus membayarnya lalu mengirim
bukti upload bayar tersebut. Halaman status belanja terdapat beberapa bagian
antara lain adalah :
a. Form upload : yaitu ketika customer sudah membayar maka tinggal
III-53
BAB IV
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1. Implementasi Sistem
4.1.1. Kebutuhan Sistem
Tahap implementasi sistem merupakan tahapan dalam pembuatan aplikasi
dari serangkaian sistem yang telah dianalisis dan dirancang sebelumnya. Pada
tahap implementasi sistem ini akan dibahas mengenai perangkat keras, dan
perangkat lunak yang digunakan, serta tampilan sistem yang disertai cara kerja
dan penjelasan dari Rancang Bangun Sistem Informasi Pemasaran Produk Umkm
Berbasis Web Menggunakan Framework Codeigniter. Berikut ini adalah
spesifikasi kebutuhan perangkat keras serta perangkat lunak yang digunakan
dalam implementasi sistem.
Tabel 4.1. Perangkat keras yang digunakan
Perangkat Keras Spesifikasi

CPU Intel(R) Core(TM) i3 CPU M 380 @ 2.53GHz
(4CPUs), ~2.5GHz
Media Penyimpanan 200 GB HDD
RAM 4 GB
VGA Intel(R) HD Graphics
Tabel 4.2. Perangkat Lunak Yang Digunakan
Perangkat Lunak Spesifikasi

Sistem Operasi Windows 10
Text Editor Sublime Text
Basis Data MYSQL
Web Browser Google Chrome
Web Server PhpMyAdmin
IV-1
IV-2
4.2. Tampilan Program
4.2.1. Halaman Untuk Pengunjung
a. Halaman Index
Gambar 4.1. Halaman Utama 1
Pada halaman ini ketika pengunjung pertama kali mengakses sebuah
website dan dapat diakses oleh siapa saja. Pada halaman ini terdapat gambar
sebuah makanan otak-otak. Pada bagian header terdapat beberapa menu di antara
lain adalah :
a. Index, tampil menu utama ketika website diakses.
b. Cart, adalah sebuah keranjang belanja. ketika pembeli sudah memilih
produk yang ingin di belinya maka produk akan otomatis masuk ke
menu chart.
c. Checkout, adalah ketika sebuah produk yang sudah masuk ke keranjang
belanja maka pembeli tinggal membayarnya saja sesuai dengan prduk
yang di pesannya.
IV-3
d. Status belanja, adalah sebuah menu yang berisi tentang produk yang
tadi di pesan dan total harga yang harus di bayar serta dengan menu
status belanja yaitu “Terkonfirmasi” dan “Menunggu Verifikasi”, jika
pembeli sudah membayar dan mengupload bukti bayar maka status
belanjanya menjadi “Terkonfirmasi”. Jika pembeli belum membayar
dan belum mengupload bukti bayar maka status belanjanya adalah
“Menunggu Verifikasi”.
e. Login, di gunakan untuk ke mengakses ke halaman admin atau
customer. Sesuai dengan input yang di masukkan pada username dan
password.
f. Register, adalah halaman pendaftaran customer agar bisa mengakses
sebuah website sebagai customer.
Pada halaman sebelum nya menampilkan sebuah gambar produk otak-otak
maka jika scroll kebawah maka akan menampilkan sebuah produk makanan otak-
otak dengan berbagai macam varian menu dan harganya yang sesuai dengan
IV-4
ukuran porsinya.
Pada gambar di atas adalah sebuah menu produk makanan otak-otak
dengan berbagai macam varian menu dan harganya yang sesuai dengan ukuran
porsinya.
Pada gambar diatas adalah akhir dari halaman utamayaitu masih
menampilkan sebuah produk makanan otak-otak dengan berbagai macam varian
menu dan harganya sesuai dengan ukuran porsinya.
IV-5
4.2.2. Halaman Form Login
Gambar 4.5. Halaman Form Login
Halamanform login muncul ketika menu header login di klik. Pada
halaman ini terdapat 2 input text yaitu username dan password yang harus di isi.
Setelah memasukkan username, password kemudian menekan button login maka
sistem akan melakukan validasi.
Apabila validasi berhasil yaitu username dan password yang di masukkan
benar adalah levelnya admin maka akan masuk ke sebuah dashboard admin dan
jika username dan password yang di masukkannya benar adalah levelnya
customer maka akan masuk ke halaman customer.
Namun apabila validasi gagal yakni username dan password yakni akan
muncul kesalahan “username dan password salah”. Apabila user belum
mempunyai akun maka bisa mengklik “Buat Akun Baru” agar di arahkan ke
halaman register.
IV-6
4.2.3. Halaman Form Register
Gambar 4.6. Halaman Form Register
Pada halaman form registrasi ini akan muncul ketika menu register di klik
pada menu header register dimana orang yang belum mengakses belum memiliki
akun untuk mengakses sebuah website. Pada halaman ini terdapat 6 input text
yaitu nama customer, username, password, email addres, phone number, alamat.
Setelah memasukkan semua input text kemudian menekan button register maka
data akan tersimpan ke sebuah database.
IV-7
4.2.4. Halaman Admin
a. Halaman Dashboard admin
Gambar 4.7. Halaman Dashboard Admin
Setalah pengguna melakukan validasi pada halaman login dengan benar
dan levelnya admin. Maka akan di alihkan ke halaman dashboard admin seperti
pada gambar diatas pada bagian halaman ini terdapat beberapa menu antara lain
adalah :
a. Dashboard, yaitu sebuah tampilan utama ketika sudah login.
b. Produk Otak-Otak Mamih, yaitu berisi data lagi antara lain adalah data
produk dan kategori.
c. Data produk, yaitu di gunakan oleh admin untuk mengelola data
produk seperti hapus, edit dan tambah produk.
d. Kategori, yaitu di gunakan oleh admin untuk mengelola kategori pada
produk
e. Verifikasi pembayaran, yaitu di gunakan oleh admin untuk melakukan
verifikasi pembayaran ketika customer sudah membayar dan mengirim
bukti pembayaran.
IV-8
b. Halaman Data Produk
Gambar 4.8. Halaman Data Produk
Halaman data Produk digunakan untuk mengelola data produk. Data
tersebut ditampilkan dalam bentuk tabel seperti pada gambardi atas. Data yang
ditampilkan adalah gambar produk, kode produk, nama produk, keterangan,
kategori, harga, stok dan action.
Data produk tersebut dapat ditambahkan dengan menekan button tambah
produk. Selain itu data produk yang tersimpan pada sebuah database juga dapat
diubah dengan menekan buttonupdate dan dapat menghapus data produk dengan
menekan button hapus.
IV-9
c. Halaman Tambah Produk
Gambar 4.9. Halaman Tambah Data Produk
Halaman tambah produk di gunakan ketika admin ingin menambahkan
sebuah data produk, halaman tambah produk terdapat 5 inputtext, 1 combobox dan
1 file gambar produk yang harus diisi oleh admin :
a. Forminput kode produk diisi dengan kode produk berupa gabungan
angka dan text.
b. Formcombobox kategori produk di gunakan untuk memilih kategori
produk.
c. Forminput nama produk di isi dengan nama produk.
d. Forminput harga produk diisi dengan harga produk.
e. Forminput stok produk diisi dengan stok produk.
f. Form input keterangan produk diisi dengan keterangan produk
g. Form files gambar produk diisi dengan gambar produk yang ingin di
upload.
IV-10
Lalu klik button simpan data produk untuk menyimpan data yang telah di
isi ke dalam database. Button Reset di gunakan untuk membersihkan halaman
form yang telah di isi data tetapi tidak di simpan ke database.
d. Halaman Update Produk
Halaman update produk digunakan ketika admin ingin mengubah sebuah
data produk, halaman tambah produk terdapat 5 input text, 1 combobox dan 1 file
Gambar
gambar produk yang harus diisi oleh 4.10.
admin Halaman
: Update Data Produk
a. Form input kode produk diisi dengan kode produk berupa gabungan
angka dan text.
b. Form combo box kategori produk di gunakan untuk memilih kategori
produk.
c. Form input nama produk di isi dengan nama produk.
d. Form input harga produk diisi dengan harga produk.
e. Form input stok produk diisi dengan stok produk.
f. Form input keterangan produk diisi dengan keterangan produk
g. Form files gambar produk diisi dengan gambar produk yang ingin di
upload.
IV-11
Lalu klik button simpan data produk untuk menyimpan data yang telah di
isi ke dalam database. Button Reset di gunakan untuk membersihkan halaman
form yang telah di isi data tetapi tidak di simpan ke database.
e. Halaman Data Kategori
Gambar 4.11. Halaman Data Kategori
Halaman data Kategori digunakan admin untuk mengelola data kategori.
Data tersebut ditampilkan dalam bentuk tabel seperti pada gambar di atas. Data
yang ditampilkan adalah nama kategori, keterangan, dan action.
Data kategori tersebut dapat ditambahkan dengan menekan button tambah data.
Selain itu data kategori yang tersimpan pada sebuah database juga dapat diubah
dengan menekan button edit dan dapat menghapus data kategori dengan menekan
button hapus.
IV-12
f. Halaman Tambah Data Kategori
Gambar 4.12. Halaman Tambah Data Kategori
Halaman tambah kategori digunakan ketika admin ingin menambahkan
sebuah data kategori, halaman tambah kategori terdapat 2 inputtext yang harus
diisi oleh admin :
a. Forminput nama kategori di isi dengan nama kategori.
b. Forminput keterangan kategori diisi dengan keterangan kategori
Lalu klik button simpan data kategori untuk menyimpan data yang telah di
isi ke dalam database. ButtonReset di gunakan untuk membersihkan
halaman form yang telah di isi data tetapi tidak di simpan ke database.
g. Halaman Edit Data Kategori
Gambar 4.13. Halaman Edit Data Kategori

Halaman tambah kategori digunakan ketika admin ingin mengubah sebuah
data kategori, halaman tambah kategori terdapat 2 input text yang harus diisi oleh
IV-13
admin:
a. Forminput nama kategori di isi dengan nama kategori.
b. Forminput keterangan kategori diisi dengan keterangan kategori
Lalu klik button simpan data kategori untuk menyimpan data yang
telah di isi ke dalam database. ButtonReset digunakan untuk
membersihkan halaman form yang telah di isi data tetapi tidak di
simpan ke database.
h. Halaman Data Customer
Gambar 4.14. Halaman Data Customer
Halaman data Customer digunakan untuk mengecek customer yang sudah
register pada halaman register. Terdapat beberapa tabel yaitu username, nama
customer, email, nohandphone, negara dan action.
IV-14
i. Halaman Data Pembayaran.
Gambar 4.15. Halaman Data Pembayaran
Pada halaman data verifikasi pembayaran admin akan melakukan sebauh
verifikasi terhadap customer yang sudah membayar sebuah produk nya lalu
mengirim sebuah bukti pembayaran. Data yang di tampilkan adalah no referensi,
tanggal bayar, total, status dan action.Pada status tersebut dapat diubah dengan
menekan button verifikasi.
j. Halaman Verifikasi Pembayaran
Gambar 4.16. Halaman Verifikasi Pembayaran
Halaman verifikasi pembayaran ini digunakan ketika admin ingin
mengubah sebuah status verifikasi , halaman verifikasi pembayaran terdapat 1
combobox yang harus dipilih oleh admin :
IV-15
a. Form combobox verifikasi pembayaran di gunakan untuk memilih
verifikasi.
b. Lalu klik button verifikasi pembayaran untuk menyimpan data yang
telah di isi ke dalam database. Button Reset digunakan untuk
membersihkan halaman form yang telah di isi data tetapi tidak di
simpan ke database.
4.2.5. Halaman Customer
a. Halaman tampilan Customer
Gambar 4.17. Halaman Tampilan Customer 1
Pada halaman customer ini ketika sudah terdaftar pada data customer yang
ada di admin, customer ini dapat melihat produk dan membeli sebuah produk
sesuai dengan keinginan.Pada bagian header terdapat beberapa menu di antara
lain adalah:
a. Cart, adalah sebuah keranjang belanja. ketika pembeli sudah memilih
produk yang ingin di belinya maka produk akan otomatis masuk ke menu
chart.
IV-16
b. Checkout, adalah ketika sebuah produk yang sudah masuk ke keranjang
belanja maka pembeli tinggal membayarnya saja sesuai dengan produk
yang dipesannya.
c. Status belanja, adalah sebuah menu yang berisi tentang produk yang tadi
di pesan dan total harga yang harus di bayar serta dengan menu status
belanja yaitu “Terkonfirmasi”,“Menunggu Verifikasi” dan “Pesanan
Dikirim”, jika pembeli sudah membayar dan mengupload bukti bayar
maka status belanjanya menjadi “Terkonfirmasi”. Jika pembeli belum
membayar dan belum mengupload bukti bayar maka status belanjanya
adalah “Menunggu Verifikasi” dan jika pembeli sudah membayar dan
sudah terkonfirmasi pembayarannya maka produk akan dikirim dan status
belanja nya akan menjadi “Pesanan Dikirim”.
d. No telepon, jika customer ingin mengetahui info lebih lanjut.
e. User account, yaitu sebuah nama customer yang sudah terdaftar pada
halaman register.
IV-17
Pada halaman customer sebelum nya menampilkan sebuah gambar produk
otak-otak maka jika scroll kebawah maka akan menampilkan sebuah produk
makanan otak-otak dengan berbagai macam varian menu dan harganya yang
sesuai.
Pada gambar diatas adalah akhir dari halaman index yaitu masih
menampilkan sebuah produk makanan otak-otak dengan berbagai macam varian
menu danharganya sesuai dengan ukuran porsinya.
Gambar 4.20. Halaman Tampilan Customer Dengan Produk Porsi Biasa
IV-18
Pada gambar diatas halaman customer yaitu dengan menu porsi biasa yang
akan menampilkan beberapa produk makanan otak-otak dengan porsi biasa.
Gambar 4.21. Halaman Tampilan Customer Dengan Produk Porsi Sedang
Pada gambar diatas halaman customer yaitu dengan menu porsi sedang
yang akan menampilkan beberapa produk makanan otak-otak dengan porsi
sedang.
IV-19
Gambar 4.22. Halaman Tampilan Customer Dengan Produk Porsi Besar
Pada gambar diatas halaman customer yaitu dengan menu porsi besar yang
akan menampilkan beberapa produk makanan otak-otak dengan porsi besar.
c. Halaman Belanja
Gambar 4.23. Halaman Belanja
Pada halaman tersebut ketika customer sudah memilih produk lalu meng klik
button add to cart maka selanjutnya akan menuju ke halaman belanja customer.
Pada halaman tersebut terdapat bebearapa gambar produk, deksripsi produk, harga
produk. Dan jumlah produk yang ingin di beli. Halaman belanja terdapat beberapa
bagian diantaranya adalah :
a. Form input jual beli di isi dengan berapa julah produk yang ingin di beli
oleh customer.
b. Button add to chart : yaitu ketika customer sudah membaca keterangan
produk dan memesan beberapa produk yang di inginkan , maka tinggal
klik add to chart maka produk tersebut akan tersimpan di halaman
keranjang belanja.
c. List Bumbu : yaitu ketika customer dapat memilih berbagai rasa yang
IV-20
nantinya di campurkan oleh produk tersebut.
d. Halaman Cart
Gambar 4.24. Halaman Cart
Pada halaman cart tersebut terdapat beberapa table di antaranya adalah item,
nama produk, harga, jumlah, total dan aksi. Pada halaman ini akan memunculkan
sebuah produk yang tadi sudah di klik add to cart. Halaman cart terdapat beberapa
bagian di antaranya adalah :
a. Button Checkout : yaitu ketika customer ingin membeli produk nya maka
tinggal klik checkout maka otomatis produk tersebut akan tersimpan di
menu checkout.
b. Button Hapus : ketika customer tidak jadi ingin membelinya maka tinggal
klik hapus maka otomatis produk tersebut akan terhapus.
IV-21
d. Halaman Checkout
Gambar 4.25. Halaman Checkout
Pada halaman checkout ini terdapat beberapa table diantaranya adalah
item, nama produk, harga, jumlah, dan total, lalu di bawah tabel tersebut terdapat
bebeapa colom yaitu total belanja, ongkos kirim, total bayar dan upload bukti
pembayaran.
Pada keterangan tersebut pembayaran bisa lewat OVO/GOPAY/DANA,
lalu bisa juga menghubungi nomer telepon tersebut untuk konfirmasi lebih lanjut.
Halaman checkout terdapat beberapa bagian antara lain adalah :
a. Button bayar : yaitu ketika customer ingin membayar sebuah produk maka
tinggal klik bayar yang nanti nya akan terakses di halaman status belanja.
b. Form upload : yaitu ketika customer sudah membayar maka tinggal kirim
foto bukti pembayarannya yaitu dengan klik upload lalu kirim foto bukti
pembayaran.
IV-22
e. Halaman Status Belanja
Gambar 4.26. Halaman Status Belanja
Pada halaman status belanja ini terdapat beberapa table diantaranya
adalam item, nama produk, harga, jumlah dan total lalu di bawah table tersebut
terdapat beberapa colom yaitu total belanja, ongkos kirim, total bayar dan upload
bukti pembayaran. Pada keterangan tersebut yaitu “status belanja anda: menunggu
verifikasi” yaitu dimana customer harus membayarnya lalu mengirim bukti
upload bayar tersebut. Halaman status belanja terdapat beberapa bagian antara
lain adalah:
a. Form upload : yaitu ketika customer sudah membayar maka tinggal
IV-23
f. Halaman Cetak Kwitansi
Gambar 4.27. Halaman Cetak Kwitansi
Pada halaman cetak kwitansi ini dimana customer akan mencetak
kwitansinya dengan produk yang sudah di beli oleh customer dengan
catatan customer sudah benar membayarnya dan mengupload bukti
pembayarannya.
4.3. Pengujian Hasil Program
Setelah semua perancangan selesai diimplementasikan dengan
menggunakan bahasa program, tahap berikutnya adalah melakukan pengujian
terhadap program atau aplikasi. Pengujian dilakukan agar meminimalisir
ditemukannya kondisi program yang tidak sesuai dengan rancangan yang sudah
ada. Selain itu, pengujian program juga bertujuan untuk menemukan error sedini
mungkin yang terjadi pada program.
IV-24
4.3.1. Pengujian Blackbox
Dalam penelitian ini, penulis melakukan pengujian menggunakan metode
Black Box. Pengujian blackbox adalah metode pengujian yang memfokuskan pada
fungsional perangkat lunak. Metode ini digunakan untuk menemukan kesalahan
dalam kategori seperti fungsi yang tidak benar atau hilang, kesalahan antarmuka,
kesalahan dalam struktur data, dan kesalahan kinerja.
4.3.2. Pengujian Halaman Untuk Pengunjung
a. Pengujian Halaman Index
Hasil yang Hasil Hasil

No. Jenis Uji Data Uji
Diharapkan Keluaran Uji
1. Menu Klik Menu Tampil Halaman Tampil

Login Login Login Login Valid
2. Menu Klik Menu Tampil Halaman Tampil
Valid
Register Register Register Register
Tabel 4.3. Pengujian Halaman Index
b. Pengujian Halaman Login

Tabel 4.4. Pengujian Halaman Login
No Hasil yang Hasil Hasil

Jenis Uji Data Uji
. Diharapkan Keluaran Uji
Muncul
ButtonLogi Satu atau lebih message Muncul
1.
n field kosong “Harap isi message Valid
bidang ini”
Menginputkan Muncul
username atau message
3. ButtonLogi password secara “Username Muncul
Valid
n acak ,kemudian atau password message
klik button Login salah.”
IV-25
Tampil
Menampilkan halaman
halaman suai sesuai
Semua input diisi
ButtonLogi dengan level dengan
4. dengan benar. Valid
n admin dan level
customer admin dan
customer
Menampilkan Tampil
Link buat Klik Link buat
5. Halaman Halaman Valid
akun baru akun baru
Register Register
c. Halaman Register
Tabel 4.5. Hasil Pengujian Halaman Register

Jenis Uji Data Uji
Satu atau Muncul message
ButtonRegist Muncul
1. lebih field “Harap mengisi
er message Valid
kosong bidang ini!”
Muncul
Muncul message
message
Semua input “Register
dan
2. ButtonRegist diisi dengan berhasil!” lalu
tampil Valid
er benar. tampil halaman
halaman
login
login
4.3.3. Pengujian Halaman Untuk Admin
a. Halaman Dashboard Admin

Tabel 4.6. Hasil Pengujian Halaman Dashboard Admin

Jenis Uji Data Uji
Tampil
Menu Klik Menu Tampil halaman
1. halaman Valid
Dashboard Dashboard Dashboard
Dashboard
Menu data Klik Menu Tampil halaman Tampil data
2. Valid
produk data produk data produk produk
3. Menu Klik Menu Tampil halaman Tampil data Valid
IV-26
kategori kategori data kategori kategori
Menu Klik Menu Tampil
Customer Customer Tampil halaman halaman
4. Valid
otak-otak otak-otak Data customer Data
mamih mamih customer
Tampil
Menu
Klik Menu Tampil halaman halaman
Verifikasi
5. Verifikasi verifikasi verifikasi Valid
Pembayara
pembayaran pembayaran pembayara
n
n
b. Halaman Data Produk

Tabel 4.7. Hasil Pengujian Halaman Data Produk

Button
Klik button Munculform tambah Tampil
1. Tambah
Tambah Data data produk form Valid
Data
Klik button
2. Button Muncul form update Tampil
update Valid
Update data produk form
Data terhapus dari
database mau dari
3. Button Klik button Data
halaman data Valid
Hapus hapus terhapus
produk
c. Halaman Tambah Data produk

Tabel 4.8. Halaman Tambah Data produk

Button Semua atau
Simpan sebagian Muncul message Muncul
1. Valid
Data field error message
Produk kosong
IV-27
Data di tambahkan
Tampil
Button Data diisi pada database,
halaman
2. Simpan dengan kemudian dialihkan Valid
data
Data produk lengkap ke halaman data
produk
produk
d. Halaman Update Data Produk

Tabel 4.9. Hasil Pengujian Halaman Update Data Produk

Jenis Uji Data Uji
No. Diharapkan Keluaran Uji
Button
Semua atau
Update
1. sebagian Muncul message Muncul
Data Valid
field kosong error message
Produk
Data di ubah pada
Button Tampil
Data diisi database, kemudian
Update halaman
2. dengan dialihkan ke Valid
Data data
lengkap halaman data
produk produk
produk
e. Halaman Data Kategori
Tabel 4.10. Hasil Pengujian Halaman Data Pembayaran

Button Muncul form
Klik button Tampil
1. Tambah tambah data Valid
Tambah Data form
Data kategori
Button Klik button Muncul form update Tampil
2. Valid
Edit edit data kategori form
Data terhapus dari
Button Klik button database maupun Data
3. Valid
Hapus hapus dari halaman data terhapus
kategori
IV-28
f. Halaman Tambah Data Kategori
Tabel 4.11. Hasil Pengujian Halaman Tambah Data Kategori

Button
Semua atau
Simpan Muncul message Muncul
1. sebagian Valid
Data error message
field kosong
Kategori
Data di simpan pada
Button Tampil
Simpan halaman
Data data
Kategori kategori
kategori
g. Haaman Edit Data Kategori
Tabel 4.12. Hasil Pengujian Halaman Edit Data Kategori

Button
Semua atau
Update Muncul message Muncul
1. sebagian Valid
Data error message
field kosong
Kategori
Data di ubah pada
Button Tampil
Update halaman
Data data
Kategori kategori
Kategori
IV-29
h. Halaman Data Customer
Tabel 4.13. Hasil Pengujian Halaman Data Customer

Data terhapus dari
Button Klik button database mau dari Data
1.
Hapus hapus halaman data terhapus Valid
customer
i. Halaman Data Pembayaran.
Tabel 4.14. Hasil Pengujian Halaman Data Pembayaran

Tampil
Tampil halaman
Button Klik button halaman
1. verifikasi Valid
Verifikasi verifikasi verifikasi
pembayaran
pembayaran
j. Halaman Verifikasi Pembayaran
Tabel 4.15. Hasil Pengujian Halaman Verifikasi Pembayaran
Hasil yang Hasil

No. Jenis Uji Data Uji Hasil Keluaran
Diharapkan Uji
Tampil halaman
Status verifikasi pembayaran
Klik verifikasi Dan Status verifikasi
Button
1. button berubah pada berubah pada halaman Valid
Verifikasi
verifikasi halaman data data pembayaran
pembayaran Dan Admin Bisa
Mencetak Nota
k. Halaman Cetak Nota

Tabel 4.16. Hasil Pengujian Halaman Cetak Nota
No. Jenis Uji Data Uji Hasil yang Hasil Hasil
IV-30
Button Tampil
Klik Button Tampil halaman
1. Cetak halaman Valid
Cetak Nota cetak Nota
Nota cetak Nota
l. Halaman Verifikasi Pembayaran

Tabel 4.17. Hasil Pengujian Halaman Update
No Hasil yang Hasil

Jenis Uji Data Uji Hasil Keluaran
. Diharapkan Uji
Klik
Button Tampil
Button
Update halaman Tampil halaman
1. Update Valid
Pengirima verifikasi verifikasi pembayaran
Pengirima
n pembayaran
n
m. Halaman Update Pengiriman

Tabel 4.18. Hasil Pengujian Halaman Update Pengiriman
Hasil yang Hasil

Diharapkan Uji
Tampil halaman
Status verifikasi pembayaran
Klik verifikasi Dan Status verifikasi
Button
1. button berubah pada berubah pada halaman Valid
Verifikasi
verifikasi halaman data data pembayaran
pembayaran Dan Admin Bisa
Mencetak Nota
4.3.4. Pengujian Halaman Untuk Customer
a. Halaman tampilan Customer
Tabel 4.19. Hasil Pengujian Halaman Customer

No Jenis Uji Data Uji
Muncul
Klik Menu Muncul tampilan
1. Menu cart tampilan Valid
cart halaman cart
halaman cart
Muncul
Muncul tampilan
Menu Klik Menu tampilan
2. halaman Valid
checkout checkout halaman
checkout
checkout
3. Menu Klik Menu Muncul tampilan Muncul Valid
Status status halaman status tampilan
IV-31
halaman status
Belanja belanja belanja
belanja
Keluar dari Keluar dari
halaman halaman
Menu Klik Menu customer lalu customer lalu
4. Valid
Logout logout tampil di tampil di
halaman halaman
pengunjung pengunjung
d. Halaman Belanja
Tabel 4.20. Hasil Pengujian Halaman Belanja
No Hasil yang Hasil

Jenis Uji Data Uji Hasil Keluaran
. Diharapkan Uji
Tampil halaman
Tampil halaman
customer dan
Buttonadd Klik Button customer dan
1. produk Valid
to chart add to chart produk tersimpan di
tersimpan di
halaman cart
halaman cart
e. Halaman Cart
Tabel 4.21. Hasil Pengujian Halaman Cart
Tampil
halaman
Tampil halaman
customer
customer dan
Button Klik dan produk
1. produk tersimpan di Valid
Bayar Button Bayar tersimpan
halaman status
di halaman
belanja
status
belanja
Foto
Foto tersimpan di tersimpan
Form Klik Form
2. data pembayaran di data Valid
Upload Upload
admin pembayaran
admin
IV-32
f. Halaman Checkout
Tabel 4. 22. Hasil Pengujian Halaman Checkout
Hasil yang Hasil

No Jenis Uji Data Uji Hasil Keluaran
Diharapkan Uji
Button
Klik Button Tampil halaman Tampil halaman
1. add to Valid
add to chart belanja belanja
chart
g. Halaman Status Belanja
Tabel 4. 23. Hasil Pengujian Halaman Status Belanja
Hasil yang Hasil

Diharapkan Uji
Button Klik Tampil kwitansi dan
Cetak
1. Cetak Cetak kwintansi sudah siap Valid
Kwitansi
Kwitansi Kwitansi di cetak/print
IV-33
BAB V
KESIMPULAN DAN SARAN
5.1. Kesimpulan
Dengan melakukan beberapa tahapan akhirnya penulis berhasil
menyelasaikan sebuah “Sistem informasi Pemasaran Produk UMKM
Berbasis Web Menggunakan Framework Codeigniter” dan dapat di
rancang suatu web yang bisa di jalankan di setiap platform/sistem operasi.
Sistem informasi Pemasaran Produk UMKM Berbasis Web Menggunakan
Framework Codeigniter ini dapat di simpulkan bahwa :
1. Sistem ini akan mempermudah pelanggan untuk melakukan pemesanan
sebuah produk secara online tanpa harus dating ke sebuah tempat
UMKM Otak-Otak Mamih nya langsung.
2. Sistem informasi pemasaran ini dapat membantu Pemilik UMKM Otak-
Otak Mamih untuk menjual produk nya secara online.
3. Sistem Informasi Pemasaran ini dapat menjadikan UMKM Otak-Otak
Mamih ini lebih di kenal lagi oleh masyarakat.
V-1
5.2. Saran
Berdasarkan hasil evaluasi terhadap sistem informasi pemasaran
yang telah kami bangun ada beberapa hal yang perlu di perhatikan dalam
pengembangan sistem ke depannya antara lain adalah :
1. Laporan penjualan, sebaiknya di beri laporan rugi dan laporan laba.
2. Sebaiknya pengiriman bekerja sama dengan jasa pengiriman seperti
grabfood atau go-food, supaya pengiriman mudah dilihat oleh
pelanggan
3. Membuat metode pembayaran yang lebih sederhana seperti payment
gateway
4. Memperluas cakupan layanan pemesanan Otak-Otak Mamih
V-2
DAFTAR PUSTAKA
[1] M. K. Taufani., Riyadi, dan R. Y. Dewantara, “Analisis Dan Desain Sistem

Informasi Pemasaran,” Jurnal Administrasi Bisnis, vol. 38, no. 2, pp. 1-2,
September 2016.
[2] U. Nugraha., M. L. R. Pardiniasa, “Analisis sistem Informasi Pemasaran
Produk Berbasis Web Dengan Pemodelan UML,” Prosiding Seminar Ilmu
Komputer Dan Teknologi Informasi, vol. 2, no. 1, pp. 125-126, Maret 2017.
[3] N. Rahmawati., H. Mulyono, “ Analisis Dan Perancangan Sistem Informasi
Penasaran Berbasis Web Pada Toko Billy,” Jurnal Manajemen Sistem
Informasi, vol. 1, no. 2, pp. 106, Desember 2016.
[4] N. Hidayati, “Penggunaan Metode Waterfall Dalam Rancang Bangun
Sistem Informasi Penjualan,” Generation Journal, vol. 3, no. 1, pp. 1-10,
Januari 2019.
[5] Lasmedi, Afuan,”Pemanfaatan Framework Codeigniter dalam
Pengembangan Sistem Informasi Pendataan Laporan Kerja Praktek
Mahasiswa Program Studi Teknik Informatika Unsoed,” JUITA, vol. 1, no.
2, pp. 39, November 2010.
[6] F. D. Anggraeni., I. Hardjanto., A. Hayat, “Pengembangan Usaha Mikro,
Kecil, Dan Menengah (UMKM) Melalui Fasilitasi Pihak Eksternal Dan
Potensi Internal,” Jurnal Administrasi Publik, vol. 1, no. 6, pp. 1286-1287,
Agustus 2017.
[7] A. Hendini, “Pemodelan UML Sistem Informasi Monitoring Penjualan Dan
Stok Barang” Jurnal Khatulistiwa Informatika, vol. 4, no. 2, pp. 108-114,
Desember 2016.
[8] J. Simatupang., S. Sianturi, “Perancangan Sistem Informasi Pemesanan
Tiket Bus Pada PO. Handoyo Berbasis Online,” Jurnal Intra-Tech, vol. 3,
no. 2, pp. 18-19, Oktober 2019.
[9] O. Pahlevi., A. Mulyani., M. Khoir, “Sistem Informasi Invertori Barang
Menggunakan Metode Object Oriented Di PT. Livaza Teknologi Indonesia
Jakarta,” Jurnal Prosisko, vol. 5, no. 1, pp. 28-29, Maret 2018.
[10] R. V. Palit, “Rancangan Sistem Informasi Keuangan Gereja Berbasis Web
Di Jemaat Gmim Bukit Moria Malalayang” Jurnal Teknik Elektro dan
Komputer, vol. 4, no. 7, pp. 2-3, Desember 2015.
[11] R. Harminingtyas, “Analisis Layanan Website Sebagai Media Promosi,
Media Transaksi Dan Media Informasi Dan Pengaruhnya Terhadap Brand
Image Perusahaan Pada Hotel Ciputra Di Kota Semarang” Jurnal STIE
Semarang, vol. 6, no. 3, pp. 46-47, Oktober 2014.
[12] Ramlawati., A. Ramli., “Pembuatan Berbagai Produk Olahan Ikan Bagi
Kelompok Tani Nelayan Di Kecamatan Sanrobone Kabupaten Takalar,”
Jurnal Ipa Terpadu, vol. 1, no. 2, pp. 92, Maret 2018.
[13] D. Diniaty., Agusrinal, “Perancangan Strategi Pemasaran Pada Produk
Anyaman Pandan,” Jurnal Teknik Industri, vol. 11, no. 2, pp. 177, Juni
2014.
[14] F. Arif., N. Putra., H. Priyanto., D. Oktodeli, “Perancangan Sistem
Informasi Jurnal Ilmiah Dengan Pencarian Berbasis Bahasa Alami,” Jurnal
Teknologi Informasi, vol. 1, no. 6, pp. 107, Juni 2010.

Rancang Bangun Sistem Informasi Pemasaran Produk Umkm Berbasis Web Menggunakan Framework Codeigniter

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Rancang Bangun Sistem Informasi Pemasaran Produk Umkm Berbasis Web Menggunakan Framework Codeigniter

Diunggah oleh

Hak Cipta:

Format Tersedia

RANCANG BANGUN SISTEM INFORMASI PEMASARAN

PRODUK UMKM BERBASIS WEB MENGGUNAKAN

PROYEK TEKNIK INFORMATIKA

Diajukan untuk Memenuhi Persyaratan Kelulusan Mata Kuliah

PROGRAM STUDI TEKNIK INFORMATIKA