Suci May Iswandhari 16119170 Revisi

UNIVERSITAS GUNADARMA
FAKULTAS ILMU KOMPUTER & TEKNOLOGI INFORMASI
TULISAN ILMIAH
RANCANG BANGUN WEBSITE UMKM PENJUALAN

PRODUK OLAHAN PARE PADA TOKO MIAPARETOZ
MENGGUNAKAN PHP DAN MYSQL
Nama : Suci May Iswandhari

Npm : 16119170
Jurusan : Sistem Informasi
Pembimbing : Dr. Lely Prananingrum, SKom.,MMSI
Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai

Gelar Setara Sarjanah Muda
JAKARTA
2022
PERNYATAAN ORIGINALITAS DAN PUBLIKASI
Saya yang bertanda tangan di bawah ini,
NPM : 16119170
Judul Tulisan : Rancang Bangun Website UMKM Penjualan Produk
Olahan Pare Pada Toko Miaparetoz Menggunakan PHP
dan MySql
Tanggal Sidang : 29-07-2022
Tanggal Lulus : 29-07-2022
Menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri
dan dapat dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala kutipan
dalam bentuk apapun telah mengikuti kaidah dan etika yang berlaku. Mengenai isi
dan tulisan adalah merupakan tanggung jawab penulis, bukan Universitas
Gunadarma. Demikian pernyataan ini dibuat dengan sebenarnya dan penuh
kesadaran.
Bekasi, 15 Juni 2021
Suci May Iswandhari
ii
LEMBAR PENGESAHAN
Judul PI : Rancang Bangun Website UMKM Penjualan Produk
Olahan Pare Pada Toko Miaparetoz Menggunakan PHP
dan MySql
NPM : 16119170
Tanggal Sidang : 29-07-2022
Tanggal Lulus : 29-07-2022
Menyetujui
Pembimbing Kasubag. Sidang PI
(Dr. Lely Prananingrum, SKom.,MMSI.) (Dr. Sri Nawangsari, SE., MM. MIkom.)
Ketua Jurusan
(Dr. Setia Wirawan, SKom, MMSI.)
iii
ABSTRAK
Suci May Iswandhari, 16119170
RANCANG BANGUN WEBSITE UMKM PENJUALAN PRODUK
OLAHAN PARE PADA TOKO MIAPARETOZ MENGGUNAKAN PHP
DAN MYSQL
Tulisan Ilmiah. Sistem Informasi. Fakultas Ilmu Komputer dan Teknologi
Informasi. Universitas Gunadarma. 2022
Kata Kunci : Penjualan, Olahan Pare, Website, HTML, PHP, MYSQL
(xvii + 82 + Lampiran)
Pemesanan produk olahan pare yang dilakukan secara online pada Toko Miaparetoz
menjual berbagai macam produk olahan pare seperti keripik pare, sambal pare, dan
minuman pare. Awalnya pemesanan dilakukan dengan personal chat atau
meneleponnya.Dengan memanfaatkan teknologi dan internet yang ada, maka
dibuat website yang bertujuan untuk menyajikan informasi, mempermudah
pemesanan produk olahan sayur pare, mempromosikan toko ke masyarakat luas,
mendata dan mengatur laporan pemesanan secara komputerisasi. Pembuatan
Website ini menggunakan aplikasi Sublime Text 3, PHP dan MYSQL yang diujikan
dengan menggunakan metode black box testing dan telah berhasil
diimplementasikan yang mendapatkan hasil akhir bahwa website ini berjalan
dengan baik dan layak digunakan untuk umum. Website ini telah dihosting dengan
alamat website Www.miaparetoz.my.id
Daftar Pustaka (2006 – 2022)
iv
ABSTRACT
Suci May Iswandhari, 16119170
DESIGN AND BUILD MSME WEBSITE SELLING PROCESSED BITTER
MELON PRODUCTS IN MIAPARETOZ STORE USING PHP AND
MYSQL
Scientific writing. Departement of Information System. Faculty of Computer
Science and Information Technology. Gunadarma University 2022
Keywords : Sale, Bitter Gourd, Website, HTML, PHP, MYSQL
(xvii + 82 + Lampiran)
Ordering bitter melon processed products online at the Miaparetoz Store sells
various kinds of bitter melon processed products such as bitter gourd chips, bitter
gourd sauce, and bitter gourd drinks. Initially, orders were made by personal chat
or calling. By utilizing existing technology and the internet, a website was created
that aims to present information, make it easier to order processed bitter gourd
products, promote the shop to the wider community, record and organize
computerized order reports. Making this website using the Sublime Text 3
application, PHP and MYSQL which was tested using the black box testing method
and has been successfully implemented which gets the final result that this website
is running well and is suitable for public use. This website is hosted with the website
address Www.miaparetoz.my.id
Bibliography (2006 – 2022)
v
KATA PENGANTAR
Dengan mengucapkan segala puji dan syukur kehadirat Tuhan Yang Maha
Esa karena dengan Rahmat dan Kuasa-Nya dapt menyelesaikan Penulisan Ilmiah
ini. Penulisan Ilmiah ini disusun untuk melengkapi sebagai syarat dalam mencapai
gelar setara muda pada Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan
Teknologi Informasi, Universitas Gunadarma. Adapun judul Penulisan Ilmiah ini
adalah “Rancang Bangun Website UMKM Penjualan Produk Olahan Pare
Pada Toko Miaparetoz Menggunakan PHP dan MYSQL”.
Dalam menyelesaikan penulisan ilmiah ini hingga selesai banyak pihak yang
telah memberikan bantuan, bimbingan dan dukungan mental, spiritual dan materil
dari berbagai pihak sehingga penulisan ini dapat terselesaikan dengan baik,
khususnya kepada :
1. Prof. Dr. E.S. Margianti, S.E, MM, selaku Rektor Universitas Gunadarma.
2. Prof. Dr. rer-nat Achmad Benny Mutiara, S.Si, SKom., selaku Dekan
Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma.
3. Dr. Setia Wirawan. Skom., MMSI selaku Ketua Jurusan Sistem Informasi
Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma.
4. Dr. Sri Nawangsari, SE., MM., M.I.Kom selaku Kepala Sub Bagian Sidang
Penulisan Ilmiah Universitas Gunadarma.
5. Dr. Lely Prananingrum, SKom,MMSI, selaku dosen pembimbing yang
telah sabar dan ikhlas meluangkan waktu, tenaga dan pikiran memberikan
bimbingan, arahan dan saran sehingga dapat menyelesaikan penulisan
ilmiah ini dengan baik dan tepat waktu.
6. Kepada Bapak/Ibu Dosen di Universitas Gunadarma yang telah
memberikan banyak dukungan.
7. Kepada Orang Tua dan Keluarga tersayang yang telah memberikan
semangat, doa yang tulus serta kepercayaan yang besar sehingga penulisan
ilmiah ini dapat diselesaikan.
8. Kepada Dirga Ravico Repliansyah terima kasih telah memberikan support
dan semangat kepada penulis.
vi
9. Kepada sahabat tersayang, Rachmadhini Agustini, Salsabila Mutiara
Nuraini, Diana Rahma Fahriya dan Sofiyah yang selalu mendukung dan
memberikan semangat.
10. Seluruh teman kelas 3KA22 yang saling menyemangati untuk berjuang
bersama.
11. Ibu Lasmiati selaku pemilik toko Miaparetoz yang telah mengizinkan
tokonya menjadi objek penelitian.
12. Semua pihak terkait yang tidak bisa disebutkan satu persatu yang telah
membantu penyelesaian ilmiah ini, hanya dapat mengucapkan terimakasih
atas doa dan dukungannya.
Akhir kata, Penulisan Ilmiah ini jauh dari kata sempurna maka saran dan kritik
sangat membangun dibutuhkan untuk mengembangkan penulisan di masa yang
akan datang. Semoga penulisan ini bermanfaat bagi semua pihak dan pembacanya.
Bekasi, 15 Juni 2021
Suci May Iswandhari
vii
DAFTAR ISI
HALAMAN
LEMBAR JUDUL .................................................................................................. i
PERNYATAAN ORIGINALITAS DAN PUBLIKASI ..................................... ii
LEMBAR PENGESAHAN ................................................................................. iii
ABSTRAK ............................................................................................................ iv
ABSTRACT ........................................................................................................... v
KATA PENGANTAR .......................................................................................... vi
DAFTAR GAMBAR .......................................................................................... xiii
DAFTAR LAMPIRAN ..................................................................................... xvii
1. PENDAHULUAN .......................................................................................... 1
1.1 Latar Belakang Masalah ........................................................................... 1
1.2 Ruang Lingkup ........................................................................................ 2
1.3 Tujuan Penelitian ..................................................................................... 2
1.4 Metode Penelitian .................................................................................... 3
1.5 Sistematika Penulisan .............................................................................. 4
2. TINJAUAN PUSTAKA ................................................................................. 6
2.1 Penjualan ................................................................................................. 6
2.2 Pare .......................................................................................................... 6
2.3 Website .................................................................................................... 6
2.4 Hypertext Prepocessor ............................................................................. 8
2.5 Hypertext Markup Language ................................................................... 8
2.6 Cascading Style Sheet ............................................................................. 8
2.7 Bootstrap.................................................................................................. 9
2.8 XAMPP ................................................................................................... 9
viii
2.9 MySQL .................................................................................................. 10
2.10 Sublime Text........................................................................................ 11
2.11 System Development Life Cycle ......................................................... 11
2.12 Struktur Navigasi ................................................................................. 12
2.12.1 Stuktur Navigasi Linier ......................................................... 12
2.12.2 Sturktur Navigasi Non-Linier ................................................ 13
2.12.3 Struktur Navigasi Hirarki ...................................................... 13
2.12.4 Struktur Navigasi Campuran ................................................. 14
2.13 Unified Modeling Language ................................................................ 14
2.13.1 Use Case Diagram ................................................................. 15
2.13.2 Activity Diagram ................................................................... 16
2.13.3 Class Diagram ....................................................................... 17
2.13.4 Sequence Diagram................................................................. 18
2.14 Blackbox Testing ................................................................................. 19
3. PERANCANGAN DAN IMPLEMENTASI .............................................. 20
3.1 Toko Miaparetoz ................................................................................... 20
3.2 Perancangan UML ................................................................................. 20
3.2.1 Use Case Diagram ................................................................... 21
3.2.2 Activity Diagram ..................................................................... 22
3.3 Struktur Navigasi ................................................................................... 24
3.3.1 Struktur Navigasi User ............................................................ 24
3.3.2 Struktur Navigasi Admin ........................................................ 25
3.4 Rancangan Struktur Database ............................................................... 25
3.4.1 Tabel About ............................................................................. 26
3.4.2 Tabel Admin............................................................................ 26
ix
3.4.3 Tabel Deskripsi Toko .............................................................. 26
3.4.4 Tabel Gambar .......................................................................... 27
3.4.5 Tabel Kategori ......................................................................... 27
3.4.6 Tabel Ongkir ........................................................................... 27
3.4.7 Tabel Pelanggan ...................................................................... 28
3.4.8 Tabel Pembayaran ................................................................... 28
3.4.9 Tabel Pembelian ...................................................................... 29
3.4.10 Tabel Pembelian Produk ....................................................... 29
3.4.11 Tabel Produk ......................................................................... 30
3.4.12 Tabel Testimoni..................................................................... 30
3.5 Rancangan Halaman Aplikasi Toko Miaparetoz ................................... 31
3.6 Rancangan Halaman Home User........................................................... 31
3.6.1 Rancangan Halaman Produk ................................................... 32
3.6.2 Rancangan Halaman Produk Beli ........................................... 33
3.6.3 Rancangan Halaman Keranjang .............................................. 34
3.6.4 Rancangan Halaman Checkout ............................................... 35
3.6.5 Rancangan Halaman Detail Pembelian atau Nota .................. 36
3.6.6 Rancangan Halaman Input Pembayaran ................................. 37
3.6.7 Rancangan Halaman Lihat Pembayaran ................................. 38
3.6.8 Rancangan Halaman Login ..................................................... 39
3.6.9 Rancangan Halaman Daftar .................................................... 40
3.6.10 Rancangan Halaman Tentang Kami ...................................... 41
3.6.11 Rancangan Halaman Galeri ................................................... 42
3.6.12 Rancangan Halaman Login Admin ....................................... 43
3.6.13 Rancangan Halaman Dashboard ........................................... 44
x
3.6.14 Rancangan Halaman Tentang Kami ...................................... 45
3.6.15 Rancangan Halaman Tentang Pare ....................................... 45
3.6.16 Rancangan Halaman Gambar Pare ........................................ 46
3.6.17 Rancangan Halaman Kategori ............................................... 47
3.6.18 Rancangan Halaman Produk ................................................. 47
3.6.19 Rancangan Halaman Pembelian ............................................ 50
3.6.20 Rancangan Halaman Detail ................................................... 51
3.6.21 Rancangan Halaman Laporan ............................................... 52
3.6.22 Rancangan Halaman Pelanggan ............................................ 53
3.6.23 Rancangan Halaman Testimoni ............................................ 54
3.7 Implementasi Website ........................................................................... 55
3.7.1 Halaman Home User ............................................................... 55
3.7.2 Halaman Produk ...................................................................... 57
3.7.3 Halaman Beli ........................................................................... 58
3.7.4 Halaman Login ........................................................................ 59
3.7.5 Halaman Daftar ....................................................................... 59
3.7.6 Halaman Keranjang ................................................................. 60
3.7.7 Halaman Checkout .................................................................. 61
3.7.8 Halaman Riwayat Belanja ....................................................... 62
3.7.9 Halaman Lihat Pembayaran .................................................... 63
3.7.10 Halaman Tentang Kami ........................................................ 64
3.7.11 Halaman Galeri ..................................................................... 65
3.7.12 Halaman Login Admin .......................................................... 67
3.7.13 Halaman Dashboard .............................................................. 67
3.7.14 Halaman Tentang Kami ........................................................ 68
xi
3.7.15 Halaman Tentang Pare .......................................................... 69
3.7.16 Halaman Gambar Pare .......................................................... 69
3.7.17 Halaman Kategori ................................................................. 70
3.7.18 Halaman Produk .................................................................... 70
3.7.19 Halaman Pembelian............................................................... 71
3.7.20 Halaman Laporan .................................................................. 73
3.7.21 Halaman Pelanggan ............................................................... 74
3.7.22 Halaman Testimoni ............................................................... 74
3.8 Hosting Website .................................................................................... 75
3.9 Hasil Uji Coba Website ......................................................................... 75
3.9.1 Hasil Uji Coba Website Pada Halaman User .......................... 76
3.9.2 Hasil Uji Coba Website Pada Halaman User .......................... 77
3.9.3 Hasil Uji Coba Browser .......................................................... 78
3.9.4 Hardware dan Software ........................................................... 79
4. PENUTUP..................................................................................................... 80
4.1 Kesimpulan ............................................................................................. 80
4.2 Saran ....................................................................................................... 80
DAFTAR PUSTAKA .......................................................................................... 81
LAMPIRAN….…………………………………………………………………………………………………..L-1
xii
DAFTAR GAMBAR
HALAMAN
Gambar 1.1 Tahapan Metode SDLC Waterfall....................................................... 3
Gambar 2.1 Struktur Navigasi Linier .................................................................... 12
Gambar 2.2 Stuktur Navigasi Non-Linier ............................................................. 13
Gambar 2.3 Struktur Navigasi Hirarki .................................................................. 14
Gambar 3. 1 Use Case Diagram Admin ................................................................ 21
Gambar 3. 2 Use Case Diagram User ................................................................... 22
Gambar 3.3 Use Activity Diagram Admin ........................................................... 22
Gambar 3.4 Use Activity Diagram User ............................................................... 23
Gambar 3. 5 Struktur Navigasi Campuran (User) ................................................. 24
Gambar 3.6 Struktur Navigasi Campuran (Admin) .............................................. 25
Gambar 3.7 Rancangan Halaman Home User ...................................................... 32
Gambar 3.8 Rancangan Halaman Produk ............................................................. 33
Gambar 3.9 Rancangan Halaman Produk Beli ..................................................... 34
Gambar 3.10 Rancangan Halaman Keranjang ...................................................... 35
Gambar 3.11 Rancangan Halaman Checkout ....................................................... 36
Gambar 3.12 Rancangan Halaman Checkout ....................................................... 37
Gambar 3.13 Rancangan Halaman Input Pembayaran ......................................... 38
Gambar 3.14 Rancangan Halaman Lihat Pembayaran ......................................... 39
Gambar 3.15 Rancangan Halaman Input Pembayaran ......................................... 40
Gambar 3.16 Rancangan Halaman Daftar ............................................................ 41
Gambar 3.17 Rancangan Halaman Tentang Kami ................................................ 42
Gambar 3.18 Rancangan Halaman Galeri ............................................................. 43
Gambar 3.19 Rancangan Halaman Login Admin ................................................. 44
Gambar 3.20 Rancangan Halaman Dashboard ..................................................... 44
Gambar 3.21 Rancangan Halaman Tentang Kami ................................................ 45
Gambar 3.22 Rancangan Halaman Tentang Pare ................................................. 46
xiii
Gambar 3.23 Rancangan Halaman Gambar Pare .................................................. 46
Gambar 3.24 Rancangan Halaman Kategori ......................................................... 47
Gambar 3.25 Rancangan Halaman Produk ........................................................... 48
Gambar 3.26 Rancangan Halaman Input Data Produk ......................................... 49
Gambar 3.27 Rancangan Halaman Ubah .............................................................. 50
Gambar 3.28 Rancangan Halaman Pembelian ...................................................... 51
Gambar 3.29 Rancangan Halaman Detail ............................................................. 52
Gambar 3.30 Rancangan Halaman Laporan ......................................................... 53
Gambar 3.31 Rancangan Halaman Pelanggan ...................................................... 54
Gambar 3.32 Rancangan Halaman Testimoni ...................................................... 55
Gambar 3.33 Tampilan Halaman Home User ....................................................... 56
Gambar 3.34 Tampilan Halaman Produk.............................................................. 57
Gambar 3.35 Tampilan Halaman Beli .................................................................. 58
Gambar 3.36 Tampilan Halaman Login................................................................ 59
Gambar 3.37 Tampilan Halaman Daftar ............................................................... 60
Gambar 3.38 Tampilan Halaman Keranjang ........................................................ 61
Gambar 3.39 Tampilan Halaman Checkout .......................................................... 62
Gambar 3.40 Tampilan Halaman Riwayat Belanja............................................... 63
Gambar 3.41 Tampilan Lihat Pembelian .............................................................. 64
Gambar 3.42 Tampilan Tentang Kami.................................................................. 65
Gambar 3.43 Tampilan Galeri............................................................................... 66
Gambar 3.44 Tampilan Login Admin ................................................................... 67
Gambar 3.45 Tampilan Halaman Dashboard ........................................................ 68
Gambar 3.46 Tampilan Halaman Tentang Kami .................................................. 68
Gambar 3.47 Tampilan Halaman Tentang Pare .................................................... 69
Gambar 3.48 Tampilan Gambar Pare.................................................................... 69
Gambar 3.49 Tampilan Halaman Kategori ........................................................... 70
Gambar 3.50 Tampilan Halaman Produk.............................................................. 71
Gambar 3.51 Tampilan Halaman Pembelian ........................................................ 72
Gambar 3.52 Tampilan Halaman Detail ............................................................... 72
Gambar 3.53 Tampilan Halaman Pembayaran ..................................................... 73
xiv
Gambar 3.54 Tampilan Halaman Laporan ............................................................ 73
Gambar 3.55 Tampilan Halaman Laporan ............................................................ 74
Gambar 3.56 Tampilan Halaman Testimoni ......................................................... 74
xv
DAFTAR TABEL
HALAMAN
Tabel 2.1 Simbol-Simbol Use Case Diagram ....................................................... 15

Tabel 2.2 Simbol-Simbol Activity Diagram ......................................................... 16
Tabel 2.3 Simbol-Simbol Class Diagram ............................................................. 17
Tabel 2.4 Simbol-Simbol Sequence Diagram ....................................................... 18
Tabel 3.1 Rancangan Tabel About ........................................................................ 26
Tabel 3.2 Rancangan Tabel Admin ....................................................................... 26
Tabel 3.3 Rancangan Tabel Deskripsi Toko ......................................................... 26
Tabel 3.4 Rancangan Tabel Gambar ..................................................................... 27
Tabel 3.5 Rancangan Tabel Kategori .................................................................... 27
Tabel 3.6 Rancangan Tabel Ongkir ...................................................................... 27
Tabel 3.7 Rancangan Tabel Pelanggan ................................................................. 28
Tabel 3.8 Rancangan Tabel Pembayaran .............................................................. 28
Tabel 3.9 Rancangan Tabel Pembelian ................................................................. 29
Tabel 3.10 Rancangan Tabel Pembelian Produk .................................................. 29
Tabel 3.11 Rancangan Tabel Produk .................................................................... 30
Tabel 3.12 Rancangan Tabel Testimoni................................................................ 30
Tabel 3.13 Hasil Uji Coba Website Pada Halaman User ...................................... 76
Tabel 3.14 Hasil Uji Coba Website Pada Halaman Admin .................................. 77
Tabel 3.15 Hasil Uji Coba Browser ...................................................................... 78
xvi
DAFTAR LAMPIRAN
HALAMAN
LAMPIRAN 1 PERNYATAAN UJI COBA APLIKASI .................................... L-1
LAMPIRAN 2 LISTING PROGRAM DAN OUTPUT PROGRAM ............. L-186
xvii
1. PENDAHULUAN
1.1 Latar Belakang Masalah

Kesehatan sangat penting bagi manusia, karena tanpa kesehatan yang baik
maka manusia akan sulit dalam melaksanakan aktivitas sehari-hari. Sayur pare
adalah salah satu jenis sayur yang tidak semua masyarakat menyukainya karena
memiliki rasa yang pahit. Namun dibalik rasa pahitnya sayur pare jika dikonsumsi
secara teratur akan membuat badan menjadi sehat. Sayur pare ini merupakan
sayuran rendah kalori yang jumlahnya 17 kalori untuk 100 gram sayur pare. (Bagus
Setya Rintyarna dan Nur Qodariyah. 2020) Beberapa manfaat dari sayur pare ini
adalah dapat mencegah masalah pada kulit, anti penuaan, membuat rambut lebih
berkilau, menghilangkan ketombe pada rambut, dapat mengatasi kepala kering dan
gatal, mengatasi rambut berminyak, mengatasi rambut kasar dan masih banyak lagi.
Agar dapat meningkatkan minat masyarakat dalam mengkonsumsi sayuran pare
maka sayuran pare dikreasikan menjadi beberapa macam (Oktora, L, 2006).
Miaparetoz mengkreasikan sayur pare menjadi beberapa olahan yang
menarik untuk dikonsumsi dan dinikmati dengan menjadikan chips pare kriuk, jus
pare, dan sambal pare dengan berbagai pilihan rasa yang bervariasi, renyah, gurih,
segar, pedas, dan tidak terasa pahit. Usaha rumah tangga Miaparetoz sudah dirintis
sejak tahun 2018. Selama ini penjualan Miaparetoz dilakukan melalui sosial media
seperti Shopee, Whatsapp, dan Instagram. Miaparetoz ingin lebih mengembangkan
dan meningkatkan penjualan olahan sayur pare agar dapat lebih banyak dikenal oleh
masyarakat.
Perkembangan teknologi pada era globalisasi mengalami perkembangan
yang sangat pesat dengan mempengaruhi berbagai sektor perdagangan. Pola
perdagangan yang sebelumnya tradisional, saat ini berubah menjadi sangat maju
dengan adanya sistem e-commerce. E-commerce adalah kegiatan jual beli barang
atau jasa melalui jaringan elektronik, terutama internet. E-commerce memudahkan
kegiatan jual beli yang sebelumnya pelanggan harus mengunjungi toko untuk
membeli barang yang ingin dibeli, sekarang pelanggan hanya membuka website di
1
2
perangkat komunikasi seperti komputer atau smartphone. Website adalah media

yang digunakan untuk menampung data teks, gambar, video, suara, dan animasi
yang terhubung dengan internet secara global. Website merupakan media informasi
berbasis jaringan komputer yang dapat diakses dimana saja dengan biaya relatif
murah (Muhammad Rizqi Abyan, 2020).
Seiring dengan kemajuan teknologi, website tidak hanya berguna sebagai
suatu wadah yang mampu menampung dan menyediakan berbagai informasi yang
luas (Aptika, 2022).
Saat ini website telah menjadi suatu media penunjang untuk memudahkan
pengguna untuk berjualan online melalui website. Dengan uraian di atas maka
penulisan ilmiah ini diberi judul “Rancang Bangun Website UMKM Penjualan
Produk Olahan Pare Pada Toko Miaparetoz Menggunakan PHP dan
MYSQL“ yang diharapkan dapat memudahkan masyarakan untuk membeli
berbagai macam olahan produk pare.
1.2 Ruang Lingkup

Berdasarkan latar belakang masalah yang telah dikemukakan maka ruang
lingkup dalam penelitian ini sebagai berikut:
1. Website menyediakan penjualan chips pare kriuk, jus pare, kacang bawang
dan sambal pare.
2. User diharuskan mengirim bukti transfer pembayaran pada website agar
produk dapat segera dikirimkan.
3. Pembayaran dilakuakan melalui transfer bank ke nomor rekening pemilik
website Mia Paretoz.
1.3 Tujuan Penelitian

Penelitian ini bertujuan untuk membuat website Rancang Bangun Website
UMKM Penjualan Produk Olahan Pare Miaparetoz Menggunakan PHP dan
MYSQL. Dengan dibuatnya website ini diharapkan dapat membantu konsumen
dalam membeli olahan sayur pare serta mendapatkan informasi tentang produk
pare yang ada pada Miaparetoz.
3
1.4 Metode Penelitian

Metode penelitian yang digunakan dalam Penulisan Ilmiah ini adalah metode
System Development Life Cycle (SDLC) Waterfall. Metode SDLC Waterfall ini
memiliki beberapa tahap, yaitu tahap perencanaan, analisa, perancangan,
implementasi, dan pengujian. Tahapan-tahapannya tergambar pada gambar 1.1 di
bawah ini :
Perencanaan
Analisa
Perancangan
Implementasi
Pengujian
Gambar 1.1 Tahapan Metode SDLC Waterfall

1. Perencanaan
Tahap perencanaan dilakukan pengumpulan data yang berkaitan dengan
pembuatan website Mia Paretoz dengan mempelajari bahasa pemrograman
PHP, HTML, dan CSS, mengumpulkan data serta hal lain yang berkaitan
dengan pembuatan website.
2. Analisa
Pada tahap analisa yaitu dengan menguraikan masalah, menganalisa
kebutuhan, mengumpulkan data cara kerja website Mia Paretoz yang
diambil dari internet, buku, dan jurnal.
4
3. Perancangan
Pada tahap perancangan dilakukan perancangan tampilan website
Miaparetoz yang meliputi perancangan stuktur navigasi, tampilan use case
diagram, activity diagram, class diagram, sequence diagram, perancangan
database, dan tampilan website.
4. Implementasi
Tahap selanjutnya implementasi dilakukan pembuatan website Miaparetoz
dengan menggunakan laptop Processor AMD Ryzen 7 4800H dengan RAM
16 GB, PHP, HTML, CSS, database MySQL, XAMPP, dan Sublime Text
3.
5. Pengujian
Tahap pengujian dilakukan uji coba website Miaparetoz dengan
menggunakan metode Blackbox Testing yang menguji seluruh fungsi pada
website Miaparetoz, selain itu juga dilakukan pengujian browser dan
hardware.
1.5 Sistematika Penulisan

Sistematika Penulisan Ilmiah ini merupakan gambaran singkat tentang
permasalahan yang akan dibahas. Gambaran dari sistematika Penulisan Ilmiah ini
terdiri dari beberapa bagian, yaitu sebagai berikut :
1. PENDAHULUAN
Bab ini berisi latar belakang masalah, ruang lingkup, tujuan penelitian,
metode penelitian, dan sistematika penulisan.
2. TINJAUAN PUSTAKA
Bab ini berisi teori mengenai penjualan, khasiat sayur pare, website, PHP,
MySQL, HTML, Cascading Style Sheet (CSS), Bootstrap, XAMPP,
System Develpoment Life Cycle (SDLC), struktur navigasi, diagram
Unified Modeling Laguage (UML) dan metode Blackbox Testing.
5
3. PERANCANGAN DAN IMPLEMENTASI

Perancangan dan implementasi membahas tentang analisis kebutuhan,
perancangan website, perancangan user interface, implementasi program,
dan pengujian website Mia Paretoz.
4. PENUTUP
Bab ini sebagai bagaian akhir dalam penulisan yang berisi kesimpulan dari
hasil penulisan yang dibuat dan saran-saran yang dapat dijadikan bahan
masukan untuk pengembangan sistem berikutnya.
2. TINJAUAN PUSTAKA
2.1 Penjualan
Menurut Philip Kotler “Penjualan adalah suatu kegiatan yang ditunjukan
untuk mencari pembeli, memengaruhi dan memberikan petunjuk agar pembeli
dapat menyesuaikan kebutuhannya dengan produk yang ditawarkan serta
mengandakan perjanjian mengenai harga yang menguntungkan bagi kedua belah
pihak” (Alvonco, Johnson. 2014).
2.2 Pare
Pare Pahit (Momordica Charantia) merupakan salah satu jenis tanaman yang
merupakan anggota keluarga dari mentimun (Cucurbitaceae). Pare adalah salah satu
tumbuhan merambat yang mudah ditemukan di negara tropis seperti Indonesia.
Meski cukup melimpah, sayuran satu ini tidak begitu diminati karena rasa pahit
yang terkandung didalamnya. Sebagian besar orang enggan untuk memakan pare
pahit dikarenakan rasanya. Namun, ternyata ada banyak manfaat pare pahit yang
baik untuk kesehatan tubuh kita. Pare merupakan sumber vitamin A, vitamin B,
vitamin C, dan vitamin K yang baik (Bagus Setya Rintyarna dan Nur Qodariyah.
2020).
Buah pahit ini, sebenarnya memiliki banyak khasiat yang manis bagi
kesehatan. Tes laboraturium awal menunjukkan bahwa senyawa fitokimia tertentu
yang terkandung dalam buah pare, mungkin efektif dalam pengobatan infeksi HIV.
Banyaknya manfaat pare pahit tidak terlepas dari kandungan zat-zat nutrisi yang
ada di dalamnya (Oktora, 2006).
2.3 Website
Website adalah kumpulan halaman yang terdapat dalam sebuah domain yang
mengandung informasi data digital baik berupa teks, gambar, animasi, suara, dan
video atau gabungan dari semua yang di sediakan melalui internet, sehingga dapat
diakses dan dilihat semua orang. Halaman website dibuat menggunakan bahasa
6
7
standar yaitu HTML. Script HTML ini akan diterjemahkan oleh web browser agar
dapat ditampilkan dalam bentuk informasi yang dapat dibaca oleh semua orang.
Website adalah keseluruhan halaman website yang terdapat dalam sebuah
domain yang mengandung informasi. Sebuah website biasanya dibangun atas
banyak halaman website yang saling berhubungan. Hubungan antara satu halaman
website dengan halaman website yang lainnya disebut dengan hyperlink, sedangkan
teks yang dijadikan media penghubung disebut hypertext (Sri Mulyani, 2016).
Seiring dengan perkembangan teknologi informasi yang begitu cepat, website
juga mengalami perkembangan yang sangat berarti. Pengelompokkan jenis website,
lebih diarahkan berdasarkan pada fungsi, sifat, dan bahasa pemrograman yang
digunakan. Adapun Jenis-jenis website berdasarkan sifatnya ada dua yaitu website
dinamis dan website statis.
1. Website Dinamis
Website dinamis merupakan sebuah website yang menyediakan content atau
isi yang selalu berubah-ubah atau update setiap waktu. Website dinamis
dirancang dengan menggunakan bahasa pemrograman web yaitu PHP yang
berfungsi untuk men-input, meng-edit, mengambil, dan mengelola data dari
database untuk ditampilkan di halaman website. Misalnya, website berita
seperti, www.kompas.com,www.detik.com, www.polinpdg.ac.id, dan lain-
lain.
2. Website Statis
Website statis merupakan website yang isinya jarang diganti bahkan tidak
pernah diganti. Website statis dirancang hanya dengan kode HTML, CSS,
dan mengandung gambar. Isi dari web statis ini langsung ditempatkan ke
dalam kode HTML. Website statis tidak perlu mengerti bahasa
pemrograman dalam hal pengolahan database. Misalnya, website profile
organisasi, dan lain-lain.
8
2.4 Hypertext Prepocessor

Hypertext Prepocessor (PHP) adalah bahasa pemrograman yang digunakan
secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan
dapat digunakan secara bersamaan dengan HTML. PHP diciptakan oleh Rasmus
Lerdorf pertama kali tahun 1994. Pada awalnya PHP adalah singkatan dari
(Personal Home Page Tools). Selanjutnya diganti menjadi FI (Forms Interpreter).
Sejak versi 3.0 nama bahasa ini diubah menjadi PHP (Hypertext Prepocessor) [7].
PHP banyak digunakan untuk membuat program-program seperti sistem
informasi klinik, rumah sakit, akademik, keuangan, manajemen aset, manajemen
bengkel, dan lain-lain. Penerapan PHP saat ini juga banyak ditemukan pada proyek-
proyek pemerintah seperti e-budgetting, e-procurement, dan e-goverment. PHP
dapat dilihat sebagai pilihan lain dari ASP.NET/C#/VB.NET Microsoft,
ColdFusion Macromedia, JSP/Java Sun Microsystems, dan CGI/Perl (Ubaya,
2022).
2.5 Hypertext Markup Language

Hypertext Markup Language (HTML) disebut hypertext karena didalam
script HTML dapat membuat sebuah text menjadi link yang dapat berpindah dari
satu halaman kehalaman lainnya. HTML digunakan untuk mendesign halaman web,
kemudian dapat diakses untuk menampilkan informasi dalam menjelajah web
browser (Jubilee Enterprise, 2016).
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja dengan CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Awal tahun 1990 HTML
mengalami perkembangan yang sangat maju. Setiap pengembangan HTML pasti
akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi
sebelumnya.
2.6 Cascading Style Sheet

Cascading Style Sheet (CSS) adalah sebuah dokumen yang berisi aturan yang
digunakan untuk memisahkan isi dengan layout dalam halaman-halaman web yang
dibuat. CSS memperkenalkan “template” yang berupa style untuk dibuat dan
9
mengizinkan penulisan kode yang lebih mudah dari halaman-halaman web yang
dirancang. Menggunakan CSS menjadi lebih mudah saat melakukan setting
tampilan keseluruh web hanya dengan menggantikan atribut-atribut (Jubilee
Enterprise, 2016). CSS adalah sebuah teknologi internet yang direkomendasikan
oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya CSS
dikembangkan di SGML pada tahun 1970 dan terus dikembangkan hingga saat ini.
CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML,
Scalable Vector Graphics (SVG), dan Mozilla XML User Interface Language
(XUL).
2.7 Bootstrap
Bootstrap adalah sebuah framework yang dilihat dengan menggunakan
bahasa HTML dan CSS, serta menyediakan efek Javascript yang dibangun dengan
menggunakan JQUery. Bootstrap telah menyediakan kumpulan komponen class
interface dasar yang telah dirancang untuk menciptakan tampilan yang menarik.
Bootstrap juga memiliki figure grid yang berfungsi untuk mengatur layout yang
bisa digunakan dengan sangat mudah dan cepat.
Bootstrap merupakan framework untuk membangun desain web secara
responsive. Responsive layout pada CSS Bootstrap dengan 12 kolom grid system
menghasilkan layout website yang secara otomatis menyesuaikan dengan lebar
browser pengguna. Selain itu, Bootstrap juga sudah support untuk HTML 5 dan
CSS 3 (Doni Andriansyah, 2016).
2.8 XAMPP
XAMPP adalah singkatan dari (X-platform, Apache, MySQL, PHP, Perl).
XAMPP merupakan perangkat lunak bebas yang mendukung banyak sistem
operasi. Fungsinya adalah sebagai server yang berdiri sendiri (localhost) yang
terdiri atas program Apache HTTP Server, database MySQL dan penerjemah
bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Program ini
tersedia dalam GNU General Public License dan bebas dengan web server yang
mudah digunakan serta dapat melayani tampilan halaman web yang dinamis [10].
10
XAMPP merupakan perangkat lunak yang dikembangkan dari LAMP yang

terdiri dari beberapa perangkat lunak seperti Linux, Apache, MySQL, PHP, dan
PERL sebagai project non profit yang dikembangkan oleh Apache Friends. Apache
Friends sendiri terdiri dari tim inti (Core Team), tim pengembang (Development
Team), dan tim dukungan (Support Team) yang didirikan Kai Oswalad Seidler dan
Kay Vogelgesang pada tahun 2002. Project ini berguna untuk mempromosikan
penggunaan Apache web browser (Palit, 2015).
2.9 MySQL
MySQL adalah database yang menghubungkan script PHP menggunakan
perintah query dan escape yang sama dengan PHP (Sadeli, 2013:10). Lain lagi
menurut Nugroho, MySQL adalah software atau program aplikasi database yaitu
software yang dapat dipakai untuk menyimpan data berupa informasi, teks, dan juga
angka (Nugroho, 2014:31). Menurt Kadir (2010:10) dalam bukunya yang berjudul
Mudah Mempelajari Database MySQL, MySQL tergolong sebagai DBMS
(Database Management System). Perangkat lunak ini bermanfaat untuk mengelola
data dengan cara yang sangat fleksibel dan cepat. Berikut adalah sejumlah aktivitas
yang terkait dengan data yang didukung oleh perangkat lunak tersebut.
1. Menyimpan data ke dalam tabel.
2. Menghapus data dalam tabel.
3. Mengubah data dalam tabel.
4. Mengambil data yang tersimpan dalam tabel.
5. Memungkinkan untuk memilih data tertentu yang diambil.
6. Memungkinkan untuk melakukan untuk pengaturan hak akses terhadap data.
MySQL banyak dipakai untuk kepentingan penanganan database karena
selain handal juga bersifat open source. Konsekuensi dari open source, perangkat
lunak ini dapat dipakai oleh siapa saja tanpa membayawa dan source code nya bisa
diunduh oleh siapa saja.
11
2.10 Sublime Text

Sublime Text merupakan perangkat lunak text editor yang digunakan untuk
membuat atau meng-edit suatu aplikasi. Sublime Text mempunyai fitur plugin
tambahan yang memudahkan programmer. Selain itu, Sublime Text juga memiliki
desain yang simple dan keren menjadikan Sublime Text terkesan elegan untuk
sebuat syntax editor. Selain ringan, IDE ini memiliki kecepatan proses simpan dan
buka file. Tidak heran kalau IDE ini paling banyak digunakan terutama dikalangan
programmer berbasis web (Supono, 2018:14).
2.11 System Development Life Cycle

System Development Life Cycle (SDLC) adalah sebuah proses logika yang
digunakan oleh seorang sistem analis untuk mengembangkan sebuah sistem
informasi yang melibatkan requirements, validation, training, dan pemilik sistem.
Saat ini sistem sudah sangat besar dan kompleks sehingga para perancang, analis,
dan programmer harus bekerja sama untuk membuat baris kode program yang
dapat menghasilkan solusi terbaik dan memiliki nilai unggul. Pengembangan sistem
dikerjakan secara terurut mulai dari analisis, desain, pengkodean, pengujian, dan
tahap pendukung (Sri Mulyani, 2016).
Pada SDLC terbagi ke dalam lima tahapan, yaitu tahap perencanaan, tahap
analisa, tahap perancangan, tahap implementasi, dan tahap uji coba.
1. Tahap Perencanaan
Tahap perencanaan merupakan aspek studi kelayakan pengembangan sistem
dimana terdapat aktivitas-aktivitas didalamnya, antara lain pendefinisian
tujuan dan ruang lingkup pengembangan, penentuan prioritas teknologi dan
pemilihan aplikasi, serta penentuan strategi yang akan digunakan dalam
pengembangan sistem.
2. Tahap Analisa
Tahap ini memberikan gambaran alur dari sistem yang akan dibuat atau
dikembangkan, mulai dari interface, fungsi-fungsi tombol, hingga output
yang dihasilkan. Tahap ini juga membantu dan menspesifikasikan kebutuhan
hardware.
12
3. Tahap Perancangan
Tahap perancangan fitur dan operasi dalam sistem dideskripsikan secara
detail seperti merancang interaksi objek dan fungsi pada sistem, merancang
skema database, dan merancang user interface.
4. Tahap Implementasi
Rancangan yang sudah dibuat selanjutnya diimplementasikan dengan
melakukan kegiatan berupa pembuatan database sesuai skema rancangan dan
pembuatan aplikasi berdasarkan desain sistem.
5. Tahap Pengujian
Pada tahap uji coba dilakukan pengujian aplikasi yang telah selesai dibuat,
dimana dalam proses ini meliputi pencarian error dari aplikasi.
2.12 Struktur Navigasi

Struktur navigasi dapat diartikan sebagai alur dari suatu program yang
menggambarkan rancangan hubungan antar area yang berbeda, sehingga
memudahkan proses pengorganisasian seluruh elemen website. Bentuk dasar dari
struktur navigasi yang biasa digunakan dalam proses pembuatan aplikasi ada empat
macam yaitu struktur navigasi linier, struktur navigasi non-linier, struktur navigasi
hirarki, dan struktur navigasi campuran (Doni Andriansyah, 2016).
2.12.1 Stuktur Navigasi Linier

Struktur navigasi linier hanya mempunyai satu rangkaian cerita berurut
yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.
Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman
sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya
atau dua halaman sesudahnya. Pengguna akan melakukan navigasi secara berurutan
dalam frame atau byte informasi ke yang lainnya (Doni Andriansyah, 2016).
Tampilan struktur navigasi linier dapat dilihat pada Gambar 2.1.
Gambar 2.1 Struktur Navigasi Linier

13
2.12.2 Sturktur Navigasi Non-Linier

Struktur navigasi non-linier merupakan pengembangan dari struktur
navigasi linier yang diperkenankan membuat navigasi bercabang. Percabangan
yang dibuat pada struktur non-linier ini berbeda dengan percabangan struktur
navigasi hirarki. Pada percabangan ini walaupun terdapat percabangan, tetapi tiap-
tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan
Slave Page, sehingga pengguna akan melakukan navigasi dengan bebas melalui isi
proyek dengan tidak terkait dengan jalur yang sudah ditentukan sebelumnya (Doni
Andriansyah, 2016). Tampilan struktur navigasi non-linier dapat dilihat pada
Gambar 2.2.
Gambar 2.2 Stuktur Navigasi Non-Linier
2.12.3 Struktur Navigasi Hirarki

Struktur navigasi hirarki disebut juga struktur linier dengan percabangan
karena pengguna melakukan navigasi disepanjang cabang pohon struktur yang
terbentuk oleh logika isi. Struktur navigasi hirarki merupakan suatu struktur yang
mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu.
Tampilan pada menu pertama disebut sebagai Master Page (halaman utama ke-1).
Halaman utama akan mempunyai halaman percabangan yang dikatakan Slave Page
(halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan,
maka tampilan tersebut akan bernama Master Page (halaman utama ke-2) dan
seterusnya (Doni Andriansyah, 2016).
14
Tampilan struktur navigasi hirarki dapat dilihat pada Gambar 2.3.
Gambar 2.3 Struktur Navigasi Hirarki
2.12.4 Struktur Navigasi Campuran

Pada struktur navigasi campuran, pengguna akan melakukan navigasi
dengan bebas (secara non-linier), tetapi terkadang dibatasi presentasi linier atau
informasi penting pada data yang paling terorganisasi secara logis pada suatu
hirarki. Struktur navigasi campuran disebut juga gabungan dari struktur navigasi
linier, hirarki, dan non-linier (Doni Andriansyah, 2016).
Tampilan struktur navigasi campuran dapat dilihat pada Gambar 2.4.
Gambar 2.4 Struktur Navigasi Campuran
2.13 Unified Modeling Language

Unified Modeling Language (UML) memiliki sintaks dan semantik serta
terdapat aturan-aturan yang harus diikuti ketika membuat model. Inti dari UML
adalah bagaimana elemen pada model-model yang telah dibuat berhubungan satu
dengan lainnya harus mengikuti standar yang ada. UML diaplikasikan untuk
merancang perangkat lunak, sarana komunikasi antara perangkat lunak dengan
proses bisnis, menjabarkan sistem secara rinci untuk analisis dan mencari apa yang
15
diperlukan sistem, dan mendokumentasi sistem yang ada, proses-proses dan

organisasinya.
UML telah diaplikasikan dalam bidang investasi perbankan, lembaga
kesehatan, departemen pertahanan, sistem terdistribusi, sistem pendukung alat
kerja, retail, sales, dan supplier. Blok pembangun utama UML adalah diagram.
Beberapa diagram ada yang rinci (jenis timing diagram) dan lainnya ada yang
bersifat umum (misalnya diagram kelas). Para pengembang sistem berorientasi
objek menggunakan bahasa mode untuk menggambarkan, membangun dan
mendokumentasi sistem yang dirancang (Yuni Sugiarti, 2013).
Beberapa jenis diagram UML yang sering digunakan, yaitu use case
diagram, activty diagram, class diagram, dan sequence diagram.
2.13.1 Use Case Diagram

Use case diagram yaitu diagram yang digunakan untuk menggambarkan
hubungan antara sistem dengan actor. Diagram ini hanya menggambarkan secara
global, sehingga simbol-simbol yang digunakan sangat sedikit (Yuni Sugiarti,
2013).
Simbol-simbol yang digunakan dalam use case diagram dapat dilihat pada
Tabel 2.1.
Tabel 2.1 Simbol-Simbol Use Case Diagram
Nama Simbol Fungsi
Elemen yang menjadi pemicu sistem.

Aktor bisa berupa orang, mesin ataupun
Actor
sistem lain yang berinteraksi dengan use
case.
Menggambarkan interaksi antara use

Association
case dan actor.
16
Menggambarkan pewarisan antara dua

aktor atau use case dimana salah satu
Generalization
aktor atau use case mewarisi properties
ke aktor atau use case yang satunya.
Potongan proses yang merupakan bagian

Use Case
dari sistem.
2.13.2 Activity Diagram

Activity diagram yaitu diagram yang digunakan untuk menggambarkan alur
kerja (aktivitas) pada use case (proses), logika, proses bisnis dan hubungan antara
aktor dengan alur-alur kerja use case. Activity diagram identik dengan flowchart,
hanya saja ada beberapa notasi tambahan yang digunakan untuk kasus-kasus
tertentu (Yuni Sugiarti, 2013). Simbol-simbol yang digunakan pada activity
diagram dapat dilihat pada Tabel 2.2.
Tabel 2.2 Simbol-Simbol Activity Diagram
Nama Simbol Fungsi
Memperlihatkan bagaimana masing-masing kelas

Activity
antarmuka saling berinteraksi satu sama lain.
State dari sistem yang mencerminkan eksekusi dari

Action
tabel.
Digunakan untuk menggambarkan suatu keputusan

Decision
tindakan diambil pada kondisi tertentu.
Activity
Menggambarkan bagaimana objek dibentuk dan
Final
diakhiri.
Node
17
Line Digunakan untuk menghubungkan satu simbol

Connector dengan simbol lainnya.
Initial
Menggambarkan bagaimana objek dibentuk.
Node
2.13.3 Class Diagram

Class diagram digunakan untuk menggambarkan struktur dalam objek
sistem. Diagram ini menunjukkan class object yang menyusun sistem dan juga
hubungan antara class object. Kelas memiliki atribut dan metode atau operasi.
Atribut adalah variabel-variabel yang mendeskripsikan properti dengan bentuk
sebaris teks dalam kelas tersebut, sedangkan metode adalah fungsi yang dimiliki
oleh kelas yang ada dalam class diagram dilambangkan menggunakan simbol-
simbol (Yuni Sugiarti, 2013).
Simbol-simbol yang digunakan pada class diagram dapat dilihat pada Tabel
2.3.
Tabel 2.3 Simbol-Simbol Class Diagram
Nama Simbol Fungsi

Package digunakan untuk
Package mengelompokan elemen-elemen model
dari class diagram.
Kelas pada struktur sistem, tiap kelas
Class memiliki nama, attribute, dan
operation atau method.
Sama seperti konsep interface dalam
Interface
pemrograman berorientasi objek.
Relasi antar class dengan pengertian
Asosiasi
umum.
18

Generalisasi generalisasi-spesialisasi (umum-
khusus).
Asosiasi
kelas yang satu digunakan oleh kelas
Berarah
yang lain.
Kebergantungan
kebergan-tungan antar kelas.
Relasi antar class dengan makna
Agregasi
semua-sebagian (whole-part).
2.13.4 Sequence Diagram

Sequence diagram digunakan untuk menggambarkan perilaku objek pada
use case dengan mendeskripsikan proses objek dengan pesan yang dikirimkan.
Oleh karena itu, untuk menggambar sequence diagram harus diketahui objek-objek
yang terlibat dalam sebuah use case beserta metode-metode yang dimiliki kelas
yang diinstalasi menjadi objek itu (Yuni Sugiarti, 2013)
Simbol-simbol yang digunakan pada sequence diagram dapat dilihat pada
Tabel 2.4.
Tabel 2.4 Simbol-Simbol Sequence Diagram
Nama Simbol Fungsi
Menggambar orang yang sedang

Actor
berinteraksi dengan sistem.
Menggambarkan hubungan yang akan

Entity Class
dilakukan.
Menggambarkan sebuah gambaran dari
Boundary Class
form.
Control Menggambarkan penghubung antara
Class boundary dengan tabel.
19
A Message Menggambarkan pengiriman pesan.
A Focus of Control Menggambarkan tempat mulai dan

& A Life Line berakhirnya pesan.
2.14 Blackbox Testing

Metode uji coba Blackbox Testing memfokuskan pada keperluan fungsional
dari software. Metode Blackbox Testing memungkinkan pengembangan software
untuk membuat himpunan kondisi input yang akan melatih seluruh syarat-syarat
fungsional suatu program. Blackbox Testing bukanlah solusi alternatif dari
Whitebox Testing tetapi lebih merupakan pelengkap untuk menguji hal-hal yang
tidak mencakup oleh Whitebox Testing (Ifiana Arief, 2009).
Pengujian menggunakan metode Blackbox Testing untuk menemukan
kesalahan, diantaranya:
1. Fungsi-fungsi yang salah atau hilang.
2. Kesalahan interface.
3. Kesalahan dalam struktur data atau akses database eksternal.
4. Kesalahan performa.
5. Kesalahan inisialisasi dan terminasi.
3. PERANCANGAN DAN IMPLEMENTASI
3.1 Toko Miaparetoz

Toko Miaparetoz merupakan sebuah home industri yang memproduksi dan
menjual produk olahan pare. Toko Miaparetoz sudah berdiri sejak tahun 2018 dan
berlokasi di Jl. Kemang 1, Kota Depok, Jawa Barat 26412. Hingga saat ini, Toko
Miaparetoz melakukan penjualan hanya melalui WhatsApp, Instagram dan Shopee.
Sehingga untuk meningkatkan penjualan perlu melakukan promosi ke jangkauan
yang lebih luas, maka dibuatlah website penjualan Toko Miaparetoz yang
membantu pemesan menjadi lebih mudah. Website ini diperuntukan untuk
memudahkan customer melakukan pemesanan dalam jumlah banyak.
Pembahasan perancangan cara pembuatan aplikasi website pemesanan
berbagai produk olahan pare pada Toko Miaparetoz menggunakan bahasa
pemograman PHP dan MySql. Pada tahap akhir pembuatan website di lakukan uji
coba dan implementasi aplikasi. Aplikasi ini memberikan informasi tentang
macam-macan produk olahan sayur pare, mencatat pemesanan, menyimpan data
pemesanan dan mencetak laporan data pemesanan.
3.2 Perancangan UML

Pada tahap perancangan ini, untuk lebih mengembangkan sistem pada
aplikasi pemesanan produk olahan sayur pare Miaparetoz maka dibutuhkan model
untuk menggambarkan proses yang ada di dalam website. Perancangan sistem
untuk aplikasi ini menggunakan diagram UML (Unified Modeling Language).
Diagram UML ini di buat menggunakan Draw IO. Model UML yang digunakan
hanya Use Case Diagram dan Activity Diagram.
20
21
3.2.1 Use Case Diagram

Use Case Diagram ada 2 aktor yaitu Admin dan User. Use Case Diagram
Admin dideskripsikan seperti gambar 3.1 bahwa admin dapat melakukan login pada
website, mengupdate menu yang terdapat pada website, mengkonfirmasi pesanan
masuk konsumen, memverifikasi bukti pembayaran yang telah diupload oleh
konsumen, mengkonfirmasi pesanan yang telah selesai dibuat lalu dapat melihat
laporan pemesanan toko Miaparetoz.
Gambar 3. 1 Use Case Diagram Admin
Use Case Diagram User pada gambar 3.2 mendeskripsikan bahwa User dapat
melihat menu yang ingin di pesan, melihat Info tentang Toko Miaparetoz,
melakukan pemesanan produk melalui website namun User diharuskan untuk
Daftar dan Login untuk menjangkau website secara lebih luas seperti memesan
Produk Sayur Pare, mengisi Form Data Pemesan, mengupdate keranjang,
mengkonfirmasi keranjang belanja, memilih metode pembayaran, mengupload
bukti pembayaran dan mengkonfirmasi pesanan selesai.
22
Gambar 3. 2 Use Case Diagram User
3.2.2 Activity Diagram

Activity Diagram yang digunakan dalam website ini ada 2 yaitu Activity
Diagram pada Admin dan Activity Diagram pada User. Activity Diagram Admin
pada Gambar 3.3 menjelaskan kegiatan Admin yang dimulai dari Login terlebih
dahulu agar bisa masuk ke dalam web admin. Jika Login berhasil maka Admin
dapat mengakses Menu khusus Admin yang terdiri dari 5 menu Daftar Kategori,
Daftar Produk, Daftar Pembelian, Laporan Pembelian dan daftar Pelanggan.
Gambar 3.3 Use Activity Diagram Admin

23
Selanjutnya Activity Diagram User pada gambar 3.4 menjelaskan kegiatan

user yang dimulai dari mengakses Website Miaparetoz. Aktivasi user dimulai dari
melihat menu-menu Produk berbagai macam olahan pare, melihat info toko yang
tertera di website. Lalu juga user ingin melanjutkan ke pemesanan maka diharuskan
login terlebih dahulu agar bisa memesan berbagai macam makanan dan minuman
olahan pare, jika user belum mempunyai akun diharapkan user mendaftar terlebih
dahulu. Kemudian user memilih button beli pada produk. Produk yang akan di
pesan ditambahakan ke keranjang belanja. Sebelum melakukan checkout, user
dapat melanjutkan belanja namun jika keranjang belanja sudah sesuai, maka user
dapat mengkonfirmasi pesanan untuk ditambahkan ke dalam daftar pesanan.
Setelah membuat pesanan, user diharapkan untuk melakukan pembayaran, user
dapat memilih metode pembayaran melalu bank. Lalu user mengupload bukti
pembayaran agar pemesanan dapat segera dibuat oleh pemilik. Jika pesanan sudah
selesai, user dapat mengkonfirmasi bahwa pesanan telah selesai dan pesanan akan
segera di proses untuk di antarkan sesuai alamat tujuan.
Gambar 3.4 Use Activity Diagram User

24
3.3 Struktur Navigasi

Struktur navigasi adalah alur yang digunakan dalam aplikasi yang dibuat.
Sebelum menyusun aplikasi kedalam sebuah software, kita harus menentukan
terlebih dahulu alur apa yang digunakan dalam aplikasi yang dibuat. Struktur
navigasi yang digunakan yaitu struktur navigasi campuran (composite). Struktur
navigasi campuran merupakan gabungan dari struktur sebelumnya dan disebut juga
struktur navigasi bebas, maksudnya adalah jika suatu tampilan membutuhkan
percabangan maka dibuat percabangan. Struktur navigasi dalam web ini dibagi
menjadi dua bagian, yaitu struktur navigasi user dan struktur navigai admin.
3.3.1 Struktur Navigasi User

Struktur navigasi user yang digunakan dalam website Miaparetoz
menggunakan struktur navigasi campuran. Pada Struktur Navigasi User
menampilkan halaman sesuai dengan kebutuhan user yang terdiri dari register,
login, menu, cara pemesanan dan pesanan user. Setiap halaman yang dipilih
mempunyai isi yang berbeda. Perancangan struktur navigasi user dapat dilihat pada
gambar 3.5
Gambar 3. 5 Struktur Navigasi Campuran (User)

25
3.3.2 Struktur Navigasi Admin

Struktur navigasi admin yang digunakan dalam website Miaparetoz
menggunakan struktur navigasi campuran. Pada Struktur Navigasi Admin
menampilkan halaman sesuai dengan kebutuhan admin yang terdiri dari login, data
admin, data customer, data order dan laporan pemesanan. Setiap halaman yang
dipilih mempunyai isi yang berbeda. Perancangan struktur navigasi admin dapat
dilihat pada gambar 3.6
Gambar 3.6 Struktur Navigasi Campuran (Admin)
3.4 Rancangan Struktur Database

Website pemesanan pada Toko Miaparetoz ini memiliki database sebagai
tempat penyimpanan informasi dan data dari toko dan juga customer. Database ini
dihubungkan menggunakan Mysql dan PhpMyAdmin. Tabel-tabel yang akan
digunakan dalam pembuatan website adalah tabel about, tabel admin, tabel
deskripsi toko, tabel gambar, tabel kategori, tabel ongkir, tabel pelanggan, tabel
pembayaran, tabel pembelian, tabel pembelian produk, tabel produk, tabel
testimoni.
26
3.4.1 Tabel About

Tabel 3.1 Rancangan Tabel About
Nama Field Tipe Data Ukuran Keterangan

Id_abt Integer 10 Primary Key
Isi Text -
Struktur Tabel About pada Tabel 3.1 hanya digunakan untuk penjelasan
tentang pare. Tabel ini berisi Id_abt dan Isi.
3.4.2 Tabel Admin

Tabel 3.2 Rancangan Tabel Admin
Nama_Field Tipe Data Ukuran Keterangan

Id_admin Integer 5 Primary Key
Username Varchar 10 -
Password Varchar 10 -
Nama_lengkap Varchar 25 -
Struktur Tabel Admin pada Tabel 3.2 hanya digunakan untuk keperluan login
admin. Tabel ini berisi nama admin, username dan password, jika saat admin login
sesuai dengan username dan password yang ada maka admin akan masuk ke dalam
web khusus admin. Admin mempunyai wewenang untuk mengelola isi web seperti
menambah, menghapus, mengedit data di dalamnya.
3.4.3 Tabel Deskripsi Toko

Tabel 3.3 Rancangan Tabel Deskripsi Toko

Id_d Integer 5 Primary Key
No_telp_toko Varchar 14 -
Email_toko Varchar 25 -
27
Jam_op Varchar 10 -
Alamat Text -
Tentang_Kami Text -
Struktur Tabel Deskripsi Toko pada Tabel 3.3 digunakan untuk

mendeskripsikan Toko Miaparetoz. Tabel ini berisi id, nomer telfon toko, email
toko, jam operasioan, alamat, dan tentang kami.
3.4.4 Tabel Gambar

Tabel 3.4 Rancangan Tabel Gambar

Id_gambar Integer 10 Primary Key
Gambar Varchar 25 -
Struktur Tabel Gambar pada Tabel 3.4 digunakan untuk memudahkan admin
memasukan tambahan gambar produk-produk yang ada pada toko Miaparetoz yang
di tampilkan ke dalam web.
3.4.5 Tabel Kategori

Tabel 3.5 Rancangan Tabel Kategori

Id_kategori Integer 5 Primary Key
Nama_kategori Varchar 25 -
Struktur Tabel Gambar pada Tabel 3.5 berisi data-data olahan pare yang
dijual dan akan di tampilkan dalam web.
3.4.6 Tabel Ongkir

Tabel 3.6 Rancangan Tabel Ongkir

Id_ongkir Integer 10 Primary Key
28
Nama_kota Varchar 25 -
Tarif Integer 10 -
Struktur Tabel Gambar pada Tabel 3.6 digunakan untuk pemilihan ongkos
kirim (ongkir) yang ada di pulau jawa dan untuk di luar pulau jawa sesuai dengan
lokasi konsumen.
3.4.7 Tabel Pelanggan

Tabel 3.7 Rancangan Tabel Pelanggan

Id_pelanggan Integer 10 Primary Key
Email_pelanggan Varchar 25 -
Password_pelanggan Varchar 10 -
Nama_pelanggan Varchar 25 -
Telepon_pelanggan Varchar 14 -
Alamat_pelanggan Text -
Struktur Tabel Gambar pada Tabel 3.4 digunakan untuk memudahkan para
konsumen memesan berbagai macam Produk Sayur Pare. Tabel ini berisi id
pelanggan, email pelanggan, password pelanggan, nama pelanggan, telepon
pelanggan dan alamat pelanggan.
3.4.8 Tabel Pembayaran

Tabel 3.8 Rancangan Tabel Pembayaran

Id_pembayaran Integer 10 Primary Key
Id_pembelian Integer 10 -
Bank Varchar 10 -
Jumlah Integer 15 -
Tanggal Date -
29
Bukti Varchar 25 -
Struktur Tabel Pembayaran pada Tabel 3.8 digunakan untuk menyimpan

informasi pelanggan yang telah melakukan pemesanan pada web Miaparetoz. Data
yang disimpan dari id pembayaran, id pembelian yang merupakan gabungan dari
angka unik, tanggal, nama, jumlah, bukti bayar dengan mencantumkan foto bukti
pembayaran, Atas Nama Rekening pelanggan yang melakukan pembayaran
transfer.
3.4.9 Tabel Pembelian

Tabel 3.9 Rancangan Tabel Pembelian

Id_pembelian Integer 10 Primary Key
Id_pelanggan Integer 10 -
Id_ongkir Integer 10 -
Tanggal_pembelian Date -
Total_pembelian Integer 15 -
Nama_kota Varchar 25 -
Tarif Integer 15 -
Alamat_pengiriman Text -
Status_pengiriman Varchar 25 -
Resi_pengiriman Varchar 10 -
Struktur Tabel Pembelian pada Tabel 3.9 berguna untuk menyimpan

informasi pelanggan yang telah melakukan pemesanan pada web Miaparetoz dan
selanjutnya untuk informasi pengiriman kepada pelanggan.
3.4.10 Tabel Pembelian Produk

Tabel 3.10 Rancangan Tabel Pembelian Produk

30
Id_pembelian_produk Integer 10 Primary Key

Id_pembelian Integer 10 -
Id_produk Integer 10 -
Jumlah Integer 15 -
Nama Varchar 25 -
Harga Integer 15 -
Subharga Integer 15 -
Struktur Tabel Pembelian Produk pada Tabel 3.10 digunakaan untuk

menyimpan id pembelian produk.
3.4.11 Tabel Produk

Tabel 3.11 Rancangan Tabel Produk

Id_produk Integer 10 Primary Key
Id_kategori Integer 10 -
Nama_produk Varchar 25 -
Harga_produk Integer 15 -
Foto_produk Varchar 25 -
Deskripsi_produk Text -
Stok_produk Integer 5 -
Struktur Tabel Produk pada Tabel 3.11 berisi data produk yang dijual dan
akan di tampilkan dalam web. Tabel ini berisi nama produk, kategori, harga, foto
produk, deskripsi dan stok pada produk tersebut.
3.4.12 Tabel Testimoni

Tabel 3.12 Rancangan Tabel Testimoni

Id_testi Integer 10 Primary Key
Nama_testi Varchar 25 -
31
Email_testi Varchar 25 -
Pesan Text -
Struktur Tabel Testimoni pada Tabel 3.12 digunakan untuk menampung saran
dan kritik para customer terhadap web Miaparetoz.
3.5 Rancangan Halaman Aplikasi Toko Miaparetoz

Pada tahapan ini diperlukan perancangan tampilan dalam proses pembuatan
website, dimana tampilan website ini digunakan sebagai interface terhadap user
untuk mempubuplikasikan serta agar user dapat berinteraksi secara langsung.
Halaman aplikasi terdiri dari 3 bagian yaitu header, content, dan foother. Header
menampilkan pilihan menu yang mempunyai fungsi masing-masing. Isi content
menampilkan tampilan atau isi dari setiap link yang dipilih. Footer menampilkan
tampilkan di bawah website berisi informasi hak cipta atau kredit dari pemilik
website.
3.6 Rancangan Halaman Home User

Pada Halaman Home terdiri dari 3 bagian yaitu header, content dan footer.
Header pada halaman home dimulai dari menampilkan logo toko Miaparetoz,
home, produk, keranjang, login, daftar, tentang kami, dan galeri. Pada bagian
content menampilkan tampilan galeri. Pada footer akan menampilkan teks berupa
copyright web toko Miaparetoz seperti rancangan pada gambar 3.7.
32
Gambar 3.7 Rancangan Halaman Home User
3.6.1 Rancangan Halaman Produk

Halaman produk merupakan halaman yang berisi tentang produk-produk
yang akan dijual di website Miaparetoz. Rancangannya seperti pada gambar 3.8.
33
Gambar 3.8 Rancangan Halaman Produk
3.6.2 Rancangan Halaman Produk Beli

Halaman produk beli merupakan halaman yang berisi link untuk masuk ke
dalam keranjang belanja costumer yang ada pada website Miaparetoz seperti pada
gambar 3.9.
34
Gambar 3.9 Rancangan Halaman Produk Beli
3.6.3 Rancangan Halaman Keranjang

Pada halaman ini menampilkan list pemesanan berbagai macam makanan dan
minuman produk olahan pare dan total harga yang dikeluarkan. Ada 3 tombol yang
dapat digunakan yaitu tombol hapus produk, lanjutkan belanja dan checkout.
Tombol Hapus Produk untuk menghapus pesanan dan akan dialihkan ke halaman
home, lanjutkan belanja yang akan mengarahkan ke halaman produk untuk
melanjutkan kembali pemesanan dan Tombol Checkout yang mengarahkan ke
verifikasi akhir pemesanan seperti pada gambar 3.10.
35
Gambar 3.10 Rancangan Halaman Keranjang
3.6.4 Rancangan Halaman Checkout

Pada halaman Checkout menampilkan halaman verifikasi pemesanan.
Halaman ini mengharapkan customer mengisi from data pemesanan yang teridiri
dari nama, nomer handphone, pilihan ongkos kirim sesuai dengan lokasi tempat
tinggal customer dan alamat lengkap customer. Jika sudah yakin data yang diisi
benar bisa dilanjutkan dengan menekan tombol checkout seperti pada gambar 3.11.
36
Gambar 3.11 Rancangan Halaman Checkout
3.6.5 Rancangan Halaman Detail Pembelian atau Nota

Pada halaman Detail Pembelian menampilkan Detail Pelanggan, Pelanggan,
Pembelian dan Pengiriman. Detail Pembelian yang berisikan data tanggal dan total
harga produk, Pelanggan yang berisikan data nama pelanggan, nomor handphone
pelanggan, email pelanggan, Pengiriman berisikan data ongkos kirim serta alamat
dan akan ditampilkan ke dalam tabel yang berisikan data no, nama produk, harga,
dan subharga. Pada Detail Pembelian juga akan menampilkan nomor rekening yang
harus dibayarkan seperti pada gambar 3.12.
37
Gambar 3.12 Rancangan Halaman Checkout
3.6.6 Rancangan Halaman Input Pembayaran

Pada halaman Input Pembayaran yang berada di halaman keranjang ini
menampilkan nota (detail pemesanan), input pembayaran dan lihat pembayaran.
Pada halaman Konfirmasi Pesanan menampilkan halaman verifikasi terakhir
pemesanan. Halaman ini mengharapkan customer mengisi from data pemesanan
yang teridiri dari nama penyetor, bank, jumlah dan foto bukti. Jika sudah yakin data
yang diisi benar bisa dilanjutkan dengan menekan tombol kirim seperti pada
gambar 3.13.
38
Gambar 3.13 Rancangan Halaman Input Pembayaran
3.6.7 Rancangan Halaman Lihat Pembayaran

Pada halaman Lihat Pembayaran menampilkan list pembayaran yang
berisikan data nama, bank, tanggal dan jumlah seperti pada gambar 3.14.
39
Gambar 3.14 Rancangan Halaman Lihat Pembayaran
3.6.8 Rancangan Halaman Login

Pada Halaman Login Pelanggan berisi form untuk mengisi Email dan
Password, jika belum mempunyai akun dapat menekan tombol daftar untuk
melakukan pendaftaran seperti pada gambar 3.15.
40
Gambar 3.15 Rancangan Halaman Input Pembayaran
3.6.9 Rancangan Halaman Daftar

Pada Halaman Daftar menampilkan form register untuk login yang berisi
nama, email, password, alamat dan telfn/Hp seperti pada gambar 3.16.
41
Gambar 3.16 Rancangan Halaman Daftar
3.6.10 Rancangan Halaman Tentang Kami

Pada halaman ini menampilkan halaman yang akan menjelaskan tentang
latar belakang perusahaan Miaparetoz. Lalu di halaman Tentang Kami ada
testimoni pelanggan untuk diisi yang berisikan data nama, email, kritik dan saran
seperti pada gambar 3.17.
42
Gambar 3.17 Rancangan Halaman Tentang Kami
3.6.11 Rancangan Halaman Galeri

Pada halaman ini menampilkan Foto-Foto dari produk Miaparetoz serta
kegiatan-kegiatan yang lain salah satu contohnya seperti Bazar seperti pada gambar
3.18.
43
Gambar 3.18 Rancangan Halaman Galeri
3.6.12 Rancangan Halaman Login Admin

Pada Halaman Login Admin berisi Form untuk mengisi Username dan
Password. Login admin akan mengarahkan ke dalam web admin dimana hanya
admin yang boleh mengaksesnya seperti pada gambar 3.19.
44
Gambar 3.19 Rancangan Halaman Login Admin
3.6.13 Rancangan Halaman Dashboard

Pada Halaman Dashboard adalah halaman yang akan ditampilkan pada saat
masuk ke halaman utama admin seperti pada gambar 3.20.
Gambar 3.20 Rancangan Halaman Dashboard

45
3.6.14 Rancangan Halaman Tentang Kami

Pada Halaman Tentang Kami menampilkan halaman yang hanya bisa di
input oleh admin seperti No Telepone, Email Toko, Jam Operasional Toko, Alamat
dan Tentang Kami untuk menjelaskan tentang latar belakang perusahaan
Miaparetoz seperti pada gambar 3.21.
Gambar 3.21 Rancangan Halaman Tentang Kami
3.6.15 Rancangan Halaman Tentang Pare

Pada Halaman Tentang Pare admin dapat menginput tentang pengertian
ilmiah sayur pare berserta manfaatnya, lalu ada button simpan untuk menyimpan
penjelasan mengenai sayur pare dan button kembali untuk kembali ke halaman
utama admin seperti pada gambar 3.22.
46
Gambar 3.22 Rancangan Halaman Tentang Pare
3.6.16 Rancangan Halaman Gambar Pare

Pada Halaman Tentang Pare admin dapat memasukkan serta mengubah dan
menghapus gambar, untuk daftar gambar pada halaman tentang kami seperti pada
gambar 3.23.
Gambar 3.23 Rancangan Halaman Gambar Pare

47
3.6.17 Rancangan Halaman Kategori

Pada Halaman Kategori ini menampilkan tabel yang berisi no, kategori dan
aksi seperti pada gambar 3.24.
Gambar 3.24 Rancangan Halaman Kategori
3.6.18 Rancangan Halaman Produk

Pada Halaman Produk ini menampilkan input data produk untuk
menambahkan produk-produk pada Miaparetoz, show yang digunakan untuk
menampilkan banyaknya produk, search untuk mecari produk yang di inginkan dan
halaman produk ini menampilkan tabel yang berisi no, kategori, nama produk,
harga, stok dan aksi seperti pada gambar 3.25.
48
Gambar 3.25 Rancangan Halaman Produk

Lalu pada Input Data Produk menampilkan tabel yang berisi kategori di tabel
kategori terdapat dropdown untuk pemilihan kategori, nama, harga (Rp), stok,
deskripsi dan foto seperti pada gambar 3.26.
49
Gambar 3.26 Rancangan Halaman Input Data Produk
Lalu Halaman Ubah menampilkan tabel berisi kategori, nama produk, harga,
stok, ganti foto dan deskripsi. Halaman ini berfungsi untuk mengubah produk-
produk pada miaparetoz seperti pada gambar 3.27.
50
Gambar 3.27 Rancangan Halaman Ubah
3.6.19 Rancangan Halaman Pembelian

Pada Halaman Pembelian ini menampilkan show yang digunakan untuk
menampilkan table yang berisi no, nama pelanggan, tanggal, status pembelian, total
dan aksi. Pada tabel aksi terdapat button detail yang berfungsi untuk melihat detail
pembelian produk pada toko Miaparetoz dan button batalkan pesanan untuk admin
membatalkan pesanan pelanggan seperti pada gambar 3.28.
51
Gambar 3.28 Rancangan Halaman Pembelian
3.6.20 Rancangan Halaman Detail

Pada Halaman Detail ini menampilkan data pembelian yang berisi data
status, tanggal dan total, data pelanggan yang berisikan data nama pelanggan,
nomor telepon dan email, data pengiriman yang berisikan data ongkos kirim, tarif
dan alamat. Pada Halaman Detail button show yang digunakan untuk menampilkan
banyaknya produk, search untuk mecari produk yang di inginkan dan menampilkan
table yang berisi no, nama produk, harga, jumlah, subtotal dan button kembali
52
Gambar 3.29 Rancangan Halaman Detail
3.6.21 Rancangan Halaman Laporan

Pada Halaman Laporan ini untuk menampilkan laporan penjualan dari
penjualan harian, bulanan dan tahunan. Laporan ini bisa diprint untuk pendataan
pribadi pemilik seperti pada gambar 3.30.
53
Gambar 3.30 Rancangan Halaman Laporan
3.6.22 Rancangan Halaman Pelanggan

Pada Halaman Pelanggan menampilkan button show yang digunakan untuk
menampilkan table yang berisi no, nama pelanggan, email dan telepon seperti pada
gambar 3.31.
54
Gambar 3.31 Rancangan Halaman Pelanggan
3.6.23 Rancangan Halaman Testimoni

Pada Halaman Testimoni menampilkan button show yang digunakan untuk
menampilkan table yang berisi no, nama, email, pesan dan action. Pada tabel action
terdapat button hapus yang fungsinya untuk menghapus testimoni. Halaman ini
berfungsi untuk menyimpan hasil penilaian yang diberikan oleh pelanggan setelah
melakukan pesenan pada toko Miaparetoz seperti pada gambar 3.32.
55
Gambar 3.32 Rancangan Halaman Testimoni
3.7 Implementasi Website

Implementasi website merupakan tahapan pengujian tampilan website yang
akan digunakan apakah sesuai dengan apa yang diharapkan. Tampilan Website
Toko Miaparetoz dibagi menjadi beberapa halaman sesuai fungsi dan komponen-
komponennya. Pembuatan tampilan halaman website dan elemen lain yang
diperlukan menggunakan bantuan software Sublime Text 3.
3.7.1 Halaman Home User

Halaman Home User adalah Halaman awal yang pertama kali muncul saat
mengakses website Toko Miaparetoz. Pada Halaman ini terdapat banyak menu
yang dapat di akses oleh user seperti home, produk, keranjang, login, daftar, tentang
kami galeri dan contact. Pemesanan produk olahan pare hanya bisa dilakukan jika
user telah login ke halaman website seperti pada gambar 3.33.
56
Gambar 3.33 Tampilan Halaman Home User

57
3.7.2 Halaman Produk

Halaman Produk akan menampilkan berbagai macam produk olahan sayur
pare yang disertai harga produk, berat produk dan deskripsi produk sesuai dengan
yang dipilih user seperti pada gambar 3.34.
Gambar 3.34 Tampilan Halaman Produk

58
3.7.3 Halaman Beli

Halaman Beli menampilkan salah satu produk yang dipilih pelanggan. Lalu
halaman ini menampilkan gambar produk, nama produk, harga produk, deskripsi
produk dan stok produk. Lalu button beli untuk user membeli produk yang dipilih
dan nanti akan dialihkan ke halaman keranjang seperti pada gambar 3.35.
Gambar 3.35 Tampilan Halaman Beli

59
3.7.4 Halaman Login

Halaman Login menampilkan tampilan form awal untuk mengakses website
Toko Miaparetoz untuk melakukan pemesanan. Pelanggan diharuskan
memasukkan username dan password yang benar seperti pada gambar 3.36.
Gambar 3.36 Tampilan Halaman Login
3.7.5 Halaman Daftar

Halaman Daftar menampilkan tampilan form untuk membuat akun di website
Toko Miaparetoz. Pelanggan diharuskan memasukkan nama, email, password,
alamat dan telp/hp seperti pada gambar 3.37.
60
Gambar 3.37 Tampilan Halaman Daftar
3.7.6 Halaman Keranjang

Halaman Keranjang menampilkan produk-produk yang telah dipilih oleh
user, terdapat 3 button pada halaman keranjang yaitu button hapus produk untuk
menghapus produk yang ingin di hapus dari daftar keranjang user, button lanjutkan
belanja pada button ini jika user ingin melanjutkan belanja maka nanti akan di
alihkan ke halaman produk untuk user melanjutkan pemilihan produk dan button
61
checkout untuk selanjutnya user melakukan pemeriksaan pemesanan seperti pada

gambar 3.38.
Gambar 3.38 Tampilan Halaman Keranjang
3.7.7 Halaman Checkout

Halaman Checkout menampilkan Detail Pembelian yang berisi data
pelanggan, data pembelian dan data pengiriman dan menampilkan table yang berisi
no, nama produk, harga, unit dan subharga lalu dibawah tabel menampilkan
informasi pembayaran sesuai dengan bank yang telah di cantumkan oleh toko
62
Gambar 3.39 Tampilan Halaman Checkout
3.7.8 Halaman Riwayat Belanja

Halaman Riwayat Belanja menampilkan konfirmasi pembayaran untuk
mengirimkan bukti pembayaran sesuai total tagihan belanja. Lalu user diminta
untuk menginputkan nama, bank, jumlah dan foto bukti pembayaran seperti pada
gambar 3.40.
63
Gambar 3.40 Tampilan Halaman Riwayat Belanja
3.7.9 Halaman Lihat Pembayaran

Halaman Lihat Pembayaran menampilkan list pembayaran yang berisikan
data nama, bank, tanggal dan jumlah seperti pada gambar 3.41.
64
Gambar 3.41 Tampilan Lihat Pembelian
3.7.10 Halaman Tentang Kami

Pada halaman ini menampilkan halaman yang akan menjelaskan tentang
latar belakang perusahaan Miaparetoz. Lalu di halaman Tentang Kami ada
testimoni pelanggan untuk diisi yang berisikan data nama, email, kritik dan saran
65
Gambar 3.42 Tampilan Tentang Kami
3.7.11 Halaman Galeri

Pada halaman ini menampilkan Foto-Foto dari produk Miaparetoz serta
kegiatan-kegiatan yang lain salah satu contohnya adalah seperti Bazar seperti pada
gambar 3.43.
66
Gambar 3.43 Tampilan Galeri

67
3.7.12 Halaman Login Admin

Halaman Login Admin menampilkan tampilan form awal untuk mengakses
website Admin Toko Miaparetoz. Admin diharuskan mengisi username dan
password dengan benar seperti pada gambar 3.44.
Gambar 3.44 Tampilan Login Admin
3.7.13 Halaman Dashboard

Halaman Dashboard menampilkan tampilan awal halaman admin disertai
dengan beberapa menu pintasan serta info terkait data produk Miaparetoz di dalam
website seperti pada gambar 3.45.
68
Gambar 3.45 Tampilan Halaman Dashboard
3.7.14 Halaman Tentang Kami

Halaman Tentang Kami menampilkan tabel berupa no telepon, email toko,
jam operasional toko, alamat dan tentang kami untuk menjelaskan tentang latar
belakang perusahaan Miaparetoz seperti pada gambar 3.46.
Gambar 3.46 Tampilan Halaman Tentang Kami

69
3.7.15 Halaman Tentang Pare

Halaman Tentang Pare menampilkan tentang pengertian ilmiah sayur pare
berserta manfaatnya seperti pada gambar 3.47.
Gambar 3.47 Tampilan Halaman Tentang Pare
3.7.16 Halaman Gambar Pare

Pada Halaman Gambar Pare menampilkan gambar sayur pare dan dapat
memasukkan serta mengubah dan menghapus gambar, untuk daftar gambar pada
halaman tentang kami seperti pada gambar 3.48.
Gambar 3.48 Tampilan Gambar Pare

70
3.7.17 Halaman Kategori

Halaman Kategori pada admin ini menampilkan input kategori produk
untuk menambahkan produk-produk baru di toko Miaparetoz, show untuk
menampilkan banyaknya kategori produk, search untuk mencari produk agar lebih
mudah dan menampilkan tabel yang berisi no, kategori dan aksi seperti pada
gambar 3.49.
Gambar 3.49 Tampilan Halaman Kategori
3.7.18 Halaman Produk

Halaman Produk pada admin dapat menambah, merubah, menghapus data-
data produk yang akan ditampilkan di halaman produk. Tabelnya berisi no,
kategori, nama produk, harga, stok, foto dan aksi seperti pada gambar 3.50.
71
Gambar 3.50 Tampilan Halaman Produk
3.7.19 Halaman Pembelian

Halaman Pembelian pada admin menampilkan tabel yang berisi no, nama
pelanggan, tanggal, status pembelian, total dan aksi, button detail menampilkan
informasi dan tabel per-produk dimulai dari pembelian pelanggan, button
pembelian menampilkan detail proses pembayaran dan admin dapat menginfokan
status pesanan melalui tabel status proses pengiriman kegunaannya adalah untuk
72
menginformasi kepada pelanggan proses pengiriman produk telah dikirim atau

dibatalkan oleh admin seperti pada gambar 3.51, 3.52 dan 3.53.
Gambar 3.51 Tampilan Halaman Pembelian
Gambar 3.52 Tampilan Halaman Detail

73
Gambar 3.53 Tampilan Halaman Pembayaran
3.7.20 Halaman Laporan

Halaman Laporan admin menampilkan laporan penjualan dari penjualan
harian, bulanan dan tahunan. Laporan ini bisa diprint untuk pendataan pribadi
pemilik seperti pada gambar 3.54.
Gambar 3.54 Tampilan Halaman Laporan

74
3.7.21Halaman Pelanggan
Halaman Pelanggan admin menampilkan data-data pelanggan pada Toko
Gambar 3.55 Tampilan Halaman Laporan
3.7.22 Halaman Testimoni

Halaman Testimoni menampilkan tabel berisi testimoni dari pelanggan
setelah melakukan pemesanan di Toko Miaparetoz seperti pada gambar 3.56.
Gambar 3.56 Tampilan Halaman Testimoni

75
3.8 Hosting Website

Hosting adalah mempublikasikan suatu situs web atau aplikasi web di internet
agar web tersebut dapat diakses oleh masyarakat luas. Dalam mempublikasikan
website dimulai dari mengupload pembuatan database dan file website. Hosting
website Toko Miaparetoz dijelaskan dalam Langkah-langkah berikut :
1. Membuka web browser Cpanel lalu membuat akun terlebih dahulu. Jika
sudah berhasil membuat akun kemudian login dengan memasukkan
username dan password di halaman login cpanel.
2. Selanjutnya Export database menjadi .sql di PhpMyadmin. Kemudian pilih
Menu MySql Database di halaman cpanel dan buat database yang
diinginkan lalu Import Database di Cpanel.
3. Sebelum Mengupload website, ZIP terlebih dahulu file website yang masih
disimpan di C:\Program Files\xampp\htdocs\. Setelah mengkompres file,
upload file ZIP web di menu File Manager cpanel lalu lakukan upload file
zip dengan mengklik tombol upload dan arahkan ke folder htdocs atau bisa
juga mendrag and drop file yang sudah di zip. Setelah file berhasil di
terupload, lalu ekstrak file ke dalam public_html.
4. Website tersebut berhasil dihosting dan dapat diakses berbagai web
browser.
3.9 Hasil Uji Coba Website

Pada tahap ini dilakukan uji coba website. Uji coba dilakukan dengan
menggunakan metode black box testing dimana cara pengujian hanya dilakukan
dengan menjalankan atau mengeksekusi program apakah fungsi dari setiap halaman
sudah sesuai dengan hasil yang diinginkan. Hasil Uji Coba dijelaskan pada tabel
3.13 dan 3.14.
76
3.9.1 Hasil Uji Coba Website Pada Halaman User

Tabel 3.13 Hasil Uji Coba Website Pada Halaman User
No Uji Coba Hasil yang diharapkan Hasil

1 Home Dapat Menampilkan form login admin Valid
dan berhasil masuk ke halaman admin
2 Katalog Dapat menampilkan halaman utama Valid
admin
3 Beli Dapat menampilkan gambar produk, Valid
nama produk, harga produk, deskripsi
produk dan stok produk.
4 Login Dapat menampilkan form login dan Valid
mengakses akun pelanggan
5 Daftar Dapat menampilkan form register dan Valid
menginputnya ke database
6 Keranjang Dapat menampilkan form login dan Valid
mengakses akun pelanggan
7 Checkout Dapat menampilkan produk yang sudah Valid
yakin untuk dipesan dan form data
pemesanan
8 Riwayat Dapat menampilkan konfirmasi Valid
Belanja pembayaran untuk mengirimkan bukti
pembayaran sesuai total tagihan belanja
9 Lihat Dapat menampilkan list pembayaran Valid
Pembayaran yang berisikan data nama, bank, tanggal
dan jumlah
10 Tentang Dapat menampilkan halaman yang Valid
Kami menjelaskan tentang latar belakang
perusahaan Miaparetoz
11 Testimoni Dapat menampilkan testimoni dari Valid
pelanggan yang telah melakukan
pemesanan
12 Galeri Dapat menampilkan Foto-Foto dari Valid
produk Miaparetoz serta kegiatan-
kegiatan yang lain yang contohnya
seperti Bazar
13 Logout Dapat keluar dari akun pelanggan Valid
77
3.9.2 Hasil Uji Coba Website Pada Halaman User

Tabel 3.14 Hasil Uji Coba Website Pada Halaman Admin
No Uji Coba Hasil yang diharapkan Hasil

1 Login Admin Dapat Menampilkan halaman utama Valid
website toko Miaparetoz
2 Dashboard Dapat menampilkan tampilan produk Valid
3 Tentang Dapat menampilkan tabel berupa no Valid
Kami telepon, email toko, jam operasional
toko, alamat dan tentang kami untuk
menjelaskan tentang latar belakang
perusahaan Miaparetoz
4 Tentang Pare Dapat menampilkan tentang pengertian Valid
ilmiah sayur pare berserta manfaatnya.
5 Gambar Pare Dapat menampilkan gambar sayur pare Valid
dan admin dapat memasukkan serta
mengubah dan menghapus gambar,
untuk daftar gambar pada halaman
tentang kami
6 Kategori Dapat menampilkan input kategori Valid
produk untuk menambahkan produk-
produk baru di toko miaparetoz
7 Produk Dapat menampilkan produk yang sudah Valid
yakin untuk dipesan dan form data
pemesanan
8 Pembelian Dapat menampilkan detail proses Valid
pembayaran dan admin dapat
menginfokan status pesanan melalui
tabel status proses pengiriman
9 Laporan Dapat menampilkan dan mencetak Valid
laporan penjualan di website toko
miaparetoz
10 Pelanggan Dapat menampilkan data-data pelanggan Valid
pada Toko miaparetoz
11 Testimoni Dapat menampilkan dan menghapus Valid
data testimoniyang diberikan oleh
pelanggan
12 Logout Dapat keluar dari halaman admin Valid
78
3.9.3 Hasil Uji Coba Browser

Tabel 3.15 Hasil Uji Coba Browser
Device Uji Coba Fungsi Hasil
Google Microsoft
Chrome Edge
Halaman Dapat menampilkan semua Berhasil Berhasil
Admin halaman, menambah, dan dan
Hp menghapus dan mengubah Berjalan Berjalan
Pavilion data di menu admin sesuai dengan dengan
Gaming yang diharapkan yang terdiri baik baik
Laptop 15- dari Halaman Login,
ec1xxx Dashboard, Tentang Kami,
AMD Tentang Pare, Gambar Pare,
Ryzen 7 Kategori, Produk, Pembelian,
4800H Laporan, Pelanggan dan
with Testimoni.
Radeon Halaman Dapat menampilkan semua Berhasil Berhasil
Graphics User halaman menu user sesuai dan dan
16 GB yang diharapkan yang terdiri Berjalan Berjalan
dari Home, Produk, dengan dengan
Keranjang, Riwayat Belanja, baik baik
Logout, Tentang Kami dan
Galeri.
Dari hasil pengujian dengan metode balck box dapat disimpulkan bahwa uji
black-box yang meliputi input, proses dan output pada website toko miaparetoz
baik dari halaman user dan admin dengan menggunakan dua browser yang berbeda
dari Google Chrome dan Microsoft Edge dapat berfungsi dengan baik sesuai
dengan rencana dan layak untuk digunakan.
79
3.9.4 Hardware dan Software

Hardware dan Software yang dibutuhkan untuk pembuatan website Toko
Miaparetoz sebagai berikut :
Hardware yang dibutuhkan yaitu laptop dengan spesifikasi :
- Merk Hp Pavilion Gaming

- Pocessor AMD Ryzen 7 4800HS with Radeon Graphics
- Memory RAM 16.0 GB
Software yang digunakan yaitu :
- Microsoft Windows 11 Pro 64 bit sebagai sistem operasi

- Sublime Text 3
- Browser Google Chrome Version 102.0.5005.63
- PHP dan MySql
4. PENUTUP
4.1 Kesimpulan
Kesimpulan yang dapat diambil dalam pembuatan website Toko Miaparetoz
yaitu untuk memperluas jangkauan penjualan produk berbahan dasarkan sayur pare,
memudahkan konsumen melakukan pemesanan berbagai macam produk olahan
pare dengan membantu mendapatkan informasi produk hanya dari tampilan produk
di website dan membeli tanpa harus datang ke toko. Pembayaran juga sudah
dilakukan secara online. Keuntungan pembuatan website untuk pemilik Toko
Miaparetoz yaitu dengan mempermudah pemilik menambahkan produk olahan
pare terbaru dan membantu proses pendataan laporan pemesanan secara
komputerisasi.
Proses pembuatan website dibuat dengan menggunakan bahasa pemograman
PHP dan MySQL sebagai pembuat databasenya dan didukung dengan bantuan
software Sublime Text 3, Xampp dan Framework Codeigniter. Website ini diuji
dengan menggunkan metode black box testing. Hasil Uji coba halaman website
baik halaman user dan admin di kedua web browser berjalan dengan baik dan layak
digunakan secara umum. Website ini telah dihosting dengan alamat website
Www.miaparetoz.my.id
4.2 Saran
Website Toko Miaparetoz ini masih bisa di kembangkan seperti
menambahkan fitur promo atau potongan harga untuk pembeli di setiap bulannya.
80
DAFTAR PUSTAKA
Alvonco, Johnson. 2014. Practical Communication Skill. Jakarta : Penerbit PT Elex

Media Komputindo. Aneka Olahan Pare.” Jurnal Pengabdian Masyarakat
Ipteks,Vol.6No.1.Aptika.kominfo.https://aptika.kominfo.go.id/2017/06/sis
tem-e-commerce-dan-perlindungan-konsumen/. Diakses pada 20 Maret
2022.
Bagus Setya Rintyarna dan Nur Qodariyah. 2020. “Inovasi Produk Pare Menjadi
Doni Andriansyah. 2016. Membuat Sistem Informasi Penjualan.
Jogyakarta: GAVA MEDIA.
ifiana Arief. 2009. Blackbox Testing. Jakarta: Universitas Gunadarma.

http://rifiana.staff.gunadarma.ac.id/Downloads/files/26083/Teknik+Penguj
ian+perangkat+Lunak+-+Black+Box.pdf . Diakses pada 21 Maret 2022.
Jubilee Enterprise. 2016. Pengenalan HTML dan CSS. Jakarta: PT Elex Media
Komputindo.
Muhammad Rizqi Abyan. 2020. Pembuatan Website Booking Lapangan Basket

TIFOSI SPORT CENTER Menggunakan Framework PHP dan Database
MySQL. Tulisan Ilmiah, Jurusan Manajemen Informatika, Fakultas Ilmu
Komputer dan Teknologi Informasi, Universitas Gunadarma.
Oktora, L., Kumala, R., Staf, S., Program, P., Farmasi, S., & Pendahuluan, U. J.
(2006). “Pemanfaatan Obat Tradisional Dengan Pertimbangan Manfaat Dan
Keamanannya.” Majalah Ilmu Kefarmasian, III(1), 1–7.
Palit, R. 2015. “Rancang Sistem Informasi Keuangan Gereja Berbasis Web Di

Jemaat GMIM Bukit Moria Malayang”. Jurnal Teknik Elektro dan
Komputer. Vol. 4, No. 7, pp. 1-7.
81
82
Sri Mulyani. 2016. Metode Analisis dan Perancangan Sistem. Bandung: Abdi
Sistematika.Ubaya.https://ubaya.ac.id/2018/content/articles_detail/144/Ba
hasa-Pemrograman-populer-PHP.html. Diakses pada 20 Maret 2022.
Yuni Sugiarti. 2013. Analisis dan Perancangan UML (Unified Modeling Language)
Generated VB 6. Yogyakarta: Graha Ilmu.
83
LEMBAR PERNYATAAN UJI COBA APLIKASI
Saya yang bertanda tangan di bawah ini :
NPM : 16119170
Judul PI : Rancang Bangun Website UMKM Penjualan Produk Olahan Pare
Pada Toko Miaparetoz Menggunakan PHP dan MySql
Menyatakan bahwa aplikasi dalam penulisan ilmiah ini telah selesai dan
diuji cobakan. Semua fungsi telah berjalan dengan baik. Demikian pernyataan ini
dibuat sebenar-benarnya dan dengan penuh kesadaran.
Bekasi, 28 Juli 2022
Mahasiswa Pembimbing
(Suci May Iswandhari) (Dr. Lely Prananingrum, SKom.,MMSI)

LAMPIRAN 1 LISTING PROGRAM
1. CONTROLLERS BARANG SAMPAI (USER)
<?php
include 'connect.php';
$id_pembelian = @$_REQUEST['id_pembelian'];
$koneksi->query("UPDATE pembelian SET status_pembelian='Barang
Telah Sampai Di Pembeli' WHERE id_pembelian='$id_pembelian'");
header("location:riwayat.php");
?>
2. CONTROLLERS BELI (USER)
<?php session_start(); ?>
<?php
?>
<?php
$id_produk = $_GET["id"];
$ambil = $koneksi->query("SELECT * FROM produk join kategori on
produk.id_kategori = kategori.id_kategori WHERE id_produk='$id_produk'");
$detail = $ambil->fetch_assoc();
?>
<!DOCTYPE html>
<html>
<head>
<title>Mia Paretoz</title>
<link href='images/logo.png' rel='shortcut icon'>
<link rel="stylesheet" type="text/css"
href="admin/assets/css/bootstrap.css">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css"
media="all">
</head>
L-1
<body>
<?php include 'menu.php'; ?>
<section class="konten">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="foto_produk/<?php echo
$detail["foto_produk"]; ?>" alt="" class="img-responsive">
</div>
<h2><?php echo $detail["nama_produk"] ?></h2>
<h4> Rp. <?php echo
number_format($detail["harga_produk"]); ?></h4>
<p>Kategori : <?php echo $detail["nama_kategori"] ?></p>
<p><?php echo $detail["deskripsi_produk"]; ?></p>
<h5>Stok Produk: <?php echo $detail['stok_produk'] ?></h5>
<form method="post">
<div class="form-group">
<div class="input-group">
<input type="number" min="1" class="form-control" name="jumlah"
max="<?php echo $detail['stok_produk'] ?>" required>
<div class="input-group-btn">
<button class="btn btn-warning" name="beli">Beli</button>
</div>
</div>
</div>
</form>
<?php
if (isset($_POST["beli"])){
$jumlah = $_POST["jumlah"];
$_SESSION["keranjang"][$id_produk] = $jumlah;
L-2
echo "<script>alert('Produk Telah Masuk Ke Keranjang Belanja');</script>";
echo "<script>location='produk.php';</script>";
}
?>
</div>
</div>
</div>
</section>
<?php include 'footer.php' ?>
</body>
</html>
3. CONTROLLERS CHECKOUT (USER)

<?php
session_start();
if (!isset($_SESSION["pelanggan"]))
{
echo "<script>alert('silahkan login');</script>";
echo "<script>location='login1.php';</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css">
L-3
</head>
<body>
<h1>Keranjang Belanja</h1>
<hr>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Produk</th>
<th>Harga</th>
<th>Unit</th>
<th>Subharga</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
<?php $totalbelanja = 0; ?>
<?php foreach ($_SESSION["keranjang"] as
$id_produk => $jumlah): ?>
<?php
$ambil = $koneksi->query("SELECT * FROM produk WHERE
id_produk='$id_produk'");
$pecah = $ambil->fetch_assoc();
$subharga = $pecah["harga_produk"]*$jumlah;
?>
<tr>
<td><?php echo $nomor; ?></td>
<td><?php echo $pecah["nama_produk"]; ?></td>
L-4
<td>Rp. <?php echo number_format($pecah["harga_produk"]); ?></td>
<td><?php echo $jumlah; ?></td>
<td>Rp. <?php echo number_format($subharga); ?></td>
</tr>
<?php $nomor++; ?>
<?php $totalbelanja+=$subharga; ?>
<?php endforeach ?>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total Belanja:</th>
<th>Rp. <?php echo number_format($totalbelanja) ?></th>
</tr>
</tfoot>
</table>
<div class="row">
<input type="text" readonly value="<?php echo
$_SESSION["pelanggan"]['nama_pelanggan'] ?>" class="form-control">
</div>
</div>
<input type="text" readonly value="<?php echo
$_SESSION["pelanggan"]['telepon_pelanggan'] ?>" class="form-control">
</div>
</div>
<select class="form-control" name="id_ongkir">
L-5
<option value="">Pilih Ongkos Kirim</option>
<?php
$ambil = $koneksi->query("SELECT * FROM ongkir");
while($perongkir = $ambil->fetch_assoc()){
?>
<option value="<?php echo $perongkir["id_ongkir"] ?>">
<?php echo $perongkir['nama_kota'] ?> -
<?php echo number_format($perongkir['tarif']) ?>
</option>
<?php } ?>
</select>
</div>
</div>
<label>Alamat Lengkap Pengiriman</label>
<textarea class="form-control" name="alamat_pengiriman"
placeholder="Masukan Alamat Lengkap Pengiriman(Termasuk Kode
Pos)"></textarea>
</div>
<button class="btn btn-warning" name="checkout">Checkout</button>
</form>
<?php
if (isset($_POST["checkout"]))
{
$id_pelanggan = $_SESSION["pelanggan"]["id_pelanggan"];
$id_ongkir = $_POST["id_ongkir"];
$tanggal_pembelian = date("Y-m-d");
$alamat_pengiriman = $_POST['alamat_pengiriman'];
$ambil = $koneksi->query("SELECT * FROM ongkir WHERE

id_ongkir='$id_ongkir'");
L-6
$arrayongkir = $ambil->fetch_assoc();
$tarif = $arrayongkir['tarif'];
$nama_kota = $arrayongkir['nama_kota'];
$tarif = $arrayongkir['tarif'];
$total_pembelian = $totalbelanja + $tarif;
$koneksi->query("INSERT INTO pembelian
(id_pelanggan,id_ongkir,tanggal_pembelian,total_pembelian,nama_kota,tarif,a
lamat_pengiriman) VALUES
('$id_pelanggan','$id_ongkir','$tanggal_pembelian','$total_pembelian','$nama_
kota','$tarif','$alamat_pengiriman') ");
$id_pembelian_barusan = $koneksi->insert_id;
foreach ($_SESSION["keranjang"] as $id_produk => $jumlah)
{
$ambil=$koneksi->query("SELECT * FROM produk WHERE
$perproduk = $ambil->fetch_assoc();
$nama = $perproduk['nama_produk'];
$harga = $perproduk['harga_produk'];
$subharga = $perproduk['harga_produk']*$jumlah;
$koneksi->query("INSERT INTO pembelian_produk
(id_pembelian,id_produk,nama,harga,subharga,jumlah)
VALUES
('$id_pembelian_barusan','$id_produk','$nama','$harga','$subharga','$jumlah')
");
$koneksi->query("UPDATE produk SET stok_produk=stok_produk -$jumlah
WHERE id_produk='$id_produk'");
}
unset($_SESSION["keranjang"]);
echo "<script>alert('Pembelian Sukses');</script>";

echo "<script>location='nota.php?id=$id_pembelian_barusan';</script>";
L-7
}
?>
</div>
</section>
<?php include 'footer.php'; ?>
</body>
</html>
4. CONTROLLERS CONNECT (USER)
<?php
$koneksi = new mysqli('localhost','root','','miaparetoz');
?>
5. CONTROLLERS DAFTAR (USER)
<?php
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper bgded overlay" style="background-
image:url('images/demo/bigpic.jpg'); background-attachment: fixed;">
<div id="breadcrumb" class="hoc clear">
<h6 class="heading">Daftar Untuk Menjadi Pelanggan</h6>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Daftar</a></li>
L-8
</ul>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Daftar Pelanggan</h3>
</div>
<div class="panel-body">
<form method="post" class="form-horizontal">
<label class="control-label col-md-3">Nama</label>
<input type="text" class="form-control" name="nama" required>
</div>
</div>
<label class="control-label col-md-3">Email</label>
<input type="email" class="form-control" name="email" requiered>
</div>
</div>
<label class="control-label col-md-3">Password</label>
<input
type="password" class="form-control" name="password">
</div>
</div>
L-9
<label class="control-label col-md-3">Alamat</label>
<textarea class="form-control" name="alamat"></textarea>
</div>
</div>
<label class="control-label col-md-3">Telp/Hp</label>
<input type="text" class="form-control" name="telepon" required>
</div>
</div>
<button class="btn btn-primary" name="daftar">Daftar</button>
</div>
</div>
</form>
<?php
if (isset($_POST["daftar"]))
{
$nama = $_POST["nama"];
$email = $_POST["email"];
$password = $_POST["password"];
$alamat = $_POST["alamat"];
$telepon = $_POST["telepon"];
$ambil = $koneksi->query("SELECT * FROM pelanggan WHERE
email_pelanggan='$email'");
$yangcocok = $ambil->num_rows;
if ($yangcocok==1)
{
L-10
echo "<script>alert('Pendaftaran Gagal, Email sudah digunakan');</script>";
echo "<script>location='daftar.php';</script>";
}
else
{
$koneksi->query("INSERT INTO pelanggan
(email_pelanggan,password_pelanggan,nama_pelanggan,telepon_pelanggan,al
amat_pelanggan)
VALUES('$email','$password','$nama','$telepon','$alamat') ");
echo "<script>alert('Pendaftaran sukses,Silahkan Login');</script>";
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script
>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js
"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></s
cript>
L-11
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
6. CONTROLLERS FOOTER (USER)
<?php include 'connect.php';
$desc = $koneksi->query("select * from desc_toko");
$data_desc = $desc->fetch_array();
?>
<div class="wrapper row4">
<footer id="footer" class="hoc clear">
<div class="one_third first">
<h6 class="heading">Hubungi Kami : </h6>
<p><strong><?php echo $data_desc['alamat'] ?></strong><br> Senin s/d
Jumat jam <?php echo $data_desc['jam_op']; ?></p>
<p><strong><?php echo $data_desc['no_telp_toko']; ?></strong>
<br>Senin s/d Jumat jam <?php echo $data_desc['jam_op']; ?></p>
<p><strong><?php echo $data_desc['email_toko']; ?></strong> <br>
Kirim pesan anda kapanpun</p>
<ul class="faico clear">
<li><a class="faicon-whatsapp"
href="https://api.whatsapp.com/send?phone=6281398657576"
target="_blank"><i class="fab fa-whatsapp"></i></a></li>
<li><a class="faicon-dribble"
href="https://l.wl.co/l?u=https%3A%2F%2Finstagram.com%2Fkedainyotnyot"
target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
L-12
<div class="one_third">
<h6 class="heading">Marketplace</h6>
<a
href="https://l.wl.co/l?u=https%3A%2F%2Fshopee.co.id%2Fkedainyotnyot_of
ficial" target="_blank"><img src="images/shopee.png" style="width:250px;
margin-left:-70px;"></a>
</div>
<h6 class="heading">Lokasi</h6>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3964.8099
364796426!2d106.83567810058594!3d-
6.41846227645874!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ebca43a004
43%3A0xfa89a920bf460b7b!2sJl.%20Kemang%201%2C%20Sukmajaya%2C
%20Kec.%20Sukmajaya%2C%20Kota%20Depok%2C%20Jawa%20Barat%2
016412!5e0!3m2!1sid!2sid!4v1647869336005!5m2!1sid!2sid" width="350"
height="350" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</footer>
</div>
<div id="copyright" class="hoc clear">
<p class="fl_left">Copyright © 2020 - All Rights Reserved - <a
href="#">www.MiaParetoz.com</a></p>
</div>
</div>
7. CONTROLLERS GALERI (USER)
<?php
session_start();
?>
L-13
<!DOCTYPE html>
<html lang="">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
>
media="all">
<style>
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400
;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 40px 20px 0 20px;
L-14
}
.container .heading {
width: 50%;
padding-bottom: 50px;
}
.container .heading h3 {
font-size: 3em;
font-weight: bolder;
border-bottom: 3px solid #222;
}
.container .heading h3 span {

font-weight: 100;
}
.container .box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container .box .dream {

display: flex;
width: 32.5%;
margin-left: 10px;
}
L-15
.container .box .dream img {
width: 100%;
border-radius: 5px;
}
.container .btn {
margin: 40px 0 70px 0;
background: #222;
padding: 15px 40px;
border-radius: 5px;
}
.container .btn a {
color: #fff;
font-size: 1.2em;
text-decoration: none;
font-weight: bolder;
letter-spacing: 3px;
}
@media only screen and (max-width: 769px) {

.container .box {
}
.container .box .dream {

width: 100%;
}
}
L-16
@media only screen and (max-width: 643px) {
.container .heading {
width: 100%;
}
.container .heading h3 {
font-size: 1em;
}
}
</style>
</head>
<body id="top">
<?php include 'menu.php' ?>

<section class="hoc container clear">
<h3>Galeri Foto Mia Paretoz</h3>
<hr>
<br>
<div class="box">
<div class="dream">
<img src="images/galeri/1.jpeg">
</div>
<div class="dream">
L-17
</div>
<div class="dream">
</div>
<div class="dream">
</div>
</div>
</section>
</div>

<a id="backtotop" href="#top"><i class="fas fa-chevron-up"></i></a>

<script
"></script>
L-18
<script
cript>
$(document).ready(function() {
});
</script>
</body>
</html>
8. CONTROLLERS HAPUS KERANJANG (USER)
<?php
session_start();
$id_produk=$_GET["id"];
unset($_SESSION["keranjang"][$id_produk]);
echo "<script>alert('Produk dihapus dari keranjang');</script>";
echo "<script>location='index.php';</script>";
?>
9. CONTROLLERS HUBUNGI KAMI (USER)
<?php
session_start();
$pare = $koneksi->query("select * from about");
$data_pare = $cupang->fetch_array();
$gambar = $koneksi->query("select * from gambar");
$data_gmb = $gambar->fetch_array();
?>
<!DOCTYPE html>
<html lang="">
L-19
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
media="all">
</head>

<body id="top">
<div id="hub" class="wrapper bgded overlay" style="background-
<h6 class="heading">Tentang kami</h6>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Kami</a></li>
</ul>
</div>
</div>
<main class="hoc container clear">
<div class="content">
<h1>Tentang Kami</h1>
<p style="text-align: justify;">
<?php echo $data_desc['tentang_kami']; ?>
</p>
<hr>
<h1>Tentang Pare</h1>
L-20
<section class="hoc clear">
<article class="two_third first">
<p style="text-align: justify;">
<?php echo $data_cupang['isi']; ?>
</p>
</article>
<figure class="one_third"><img src="images/gmb/<?php echo
$data_gmb['gmb1'] ?>" alt="Gambar Pare"></figure>
</section>
<hr>
<div id="comments">
<h2>Testimoni</h2>
<form action="proses_hubungikami.php" method="post">
<div class="one_third first">
<label for="name">Nama <span>*</span></label>
<input type="text" name="nama_testi" id="name" value="" size="22"
required>
</div>
<label for="email">Email <span>*</span></label>
<input type="email" name="email_testi" id="email" value=""
size="22" required>
</div>
<div class="block clear">
<label for="comment">Kritik dan Saran Anda </label>
<textarea name="comment" id="comment" cols="25"
rows="10"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Kirim">

L-21
<input type="reset" name="reset" value="Kosongkan Lembar">
</div>
</form>
</div>
</div>
<div class="clear"></div>
</main>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script
>
<script
"></script>
<script
cript>
</body>
});
</script>
</html>
10. CONTROLLERS INDEX (USER)
<?php
session_start();
L-22
$ambil = $koneksi->query("SELECT * FROM about");
$data = $ambil->fetch_array();
?>
<!DOCTYPE html>
<html lang="">
<head>
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
">
media="all">
<link href="layout/styles/carousel.css" rel="stylesheet" type="text/css"
media="all">
</head>
<body id="top">
<?php include 'menu.php' ?>
image:url('images/demo/bigpic.jpg');">
<div id="pageintro" class="hoc clear">
<article>
<p>UMKM Penjualan Kripik Pare</p>
<h3 class="heading">Mia Paretoz</h3>
<p>Sejak 2018</p>
<footer><a class="btn" href="produk.php">Katalog <i class="fas
fa-angle-right"></i></a></footer>
</article>
</div>
L-23
</div>

<article class="one_third first">
<h6 class="heading">Tentang Pare</h6>
<p style=" text-align: justify;"><?php echo
substr($data['isi'],0,300); ?>...</p>
<p><a class="btn" href="hubungikami.php#hub">Read More <i
class="fas fa-angle-right"></i></a></p>
</article>
<figure class="one_third"><img src="images/gmb/miaparetoz.png"
alt="Gambar Mia Paretoz"></figure>
<figure class="one_third"><img src="images/gmb/bigpicpare.jpeg"
alt="Gambar Mia Paretoz"></figure>
</section>
</div>
<div class="wrapper bgded overlay"
style="background-image:url('images/demo/testimoni.jpg');
background-attachment: fixed; position:relative;">
<section class="container" style="position:relative;">
<article>
<center>
<h3>Testimoni Pelanggan</h3>
</center>
</article>
<?php $ambil=$koneksi->query("SELECT * FROM testimoni"); ?>
<?php while($pecah =$ambil->fetch_assoc()){ ?>
<div class="mySlides">
<q><?php echo $pecah['pesan']; ?></q>
<p class="author">- <?php echo $pecah['nama_testi']; ?></p>
L-24
</div>
<?php } ?>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
</div>


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scrip
t>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.j
s"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
$(document).ready(function() {
});
//Carousel JS
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
L-25
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
</body>
</html>
11. CONTROLLERS KERANJANG (USER)
<?php
session_start();
L-26
if(empty($_SESSION["keranjang"]) OR
!isset($_SESSION["keranjang"]))
{
echo "<script>alert('Keranjang kosong, Silahkan belanja terlebih
dahulu');</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Keranjang Belanja</h1>
<hr>
<thead>
<tr>
<th>No</th>
<th>Produk</th>
<th>Harga</th>
<th>Jumlah</th>
<th>Subharga</th>
L-27
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
<?php foreach ($_SESSION["keranjang"] as $id_produk => $jumlah): ?>
<?php
$subharga = $pecah["harga_produk"]*$jumlah;
?>
<tr>
<td><?php echo $pecah["nama_produk"]; ?></td>
<td>Rp. <?php echo number_format($pecah["harga_produk"]); ?></td>
<td><?php echo $jumlah; ?></td>
<td>Rp. <?php echo number_format($subharga); ?></td>
<td>
<a href="hapuskeranjang.php?id=<?php echo $id_produk?>" class="btn-
danger btn-xs">Hapus Produk</a>
</td>
</tr>
<?php $nomor++; ?>
<?php endforeach ?>
</tbody>
</table>
<a href="produk.php" class="btn btn-info">Lanjutkan Belanja</a>
<a href="checkout.php" class="btn btn-warning">Checkout</a>
</div>
</section>
L-28
</body>
</html>
12. CONTROLLERS LIHAT PEMBAYARAN (USER)
<?php
session_start();
$id_pembelian = $_GET["id"];
$ambil = $koneksi->query("SELECT * FROM Pembayaran

LEFT JOIN pembelian ON
pembayaran.id_pembelian=pembelian.id_pembelian
WHERE pembelian.id_pembelian='$id_pembelian'");
$detbay = $ambil->fetch_assoc();
if (empty($detbay))
{
echo "<script>alert('Belum Ada Data Pembayaran')</script>";
echo "<script>location='riwayat.php';</script>";
exit();
}
if ($_SESSION["pelanggan"]['id_pelanggan']!==$detbay["id_pelanggan"])
{
echo "<script>alert('Anda Tidak Berhak Melihat Pembayaran Orang
Lain')</script>";
exit();
}
?>
<!DOCTYPE html>
<html>
L-29
<head>
</head>
<body>

<h3>Lihat Pembayaran</h3>
<div class="row">
<table class="table">
<tr>
<th>Nama</th>
<td><?php echo $detbay["nama"] ?></td>
</tr>
<tr>
<th>Bank</th>
<td><?php echo $detbay["bank"] ?></td>
</tr>
<tr>
<th>Tanggal</th>
<td><?php echo $detbay["tanggal"] ?></td>
</tr>
<tr>
<th>Jumlah</th>
<td>Rp. <?php echo number_format($detbay["jumlah"]) ?></td>
</tr>
L-30
</table>
</div>
<img src="bukti_pembayaran/<?php echo $detbay["bukti"] ?>" alt=""
class="img-responsive">
</div>
</div>
</div>
</body>
</html>
13. CONTROLLERS LOGIN 1 (USER)
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h6 class="heading">Login</h6>
L-31
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<center><h3>Login Pelanggan</h3></center>
</div>
<div class="panel-body">
<form method="post" class="form-horizontal">
<label class="control-label col-md-3">Email</label>
<input type="email" class="form-control" name="email">
</div>
</div>
<label class="control-label col-md-3">Password</label>
<input type="password" class="form-control" name="password">
</div>
</div>
<button class="btn btn-primary" name="login">Login</button>
</div>
</form>
L-32
</div>
</div>
</div>
</div>
</div>
<?php
if (isset($_POST["login"]))
{
$email = $_POST["email"];
$password = $_POST["password"];
$ambil = $koneksi->query("SELECT * FROM pelanggan WHERE
email_pelanggan='$email' AND password_pelanggan='$password'");
$akunyangcocok = $ambil->num_rows;
if ($akunyangcocok==1)
{
$akun = $ambil->fetch_assoc();
$_SESSION["pelanggan"] = $akun;
if (isset($_SESSION["keranjang"]) OR !empty($_SESSION["keranjang"]))
{
echo "<script>location='checkout.php';</script>";
}
else
{
}
}else{
echo "<script>alert('Anda Gagal Login, Periksa Akun Anda');</script>";
}
}?>
L-33
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scr
ipt>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min
.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
});
</script>
</body>
</html>
14. CONTROLLERS LOGOUT 1 (USER)
<?php
session_start();
session_destroy();
echo "<script>location='index.php';</script>";
?>
15. CONTROLLERS MENU (USER)
<?php
?>
<!DOCTYPE html>
L-34
<html>
<head>
<style type="text/css">
.disable_button{
pointer-events: none;
cursor: not-allowed;
}
</style>
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.cs
s">
</head>
<body>
<header id="header" class="hoc clear">
<div id="logo" class="one_quarter first">
<img src="images/logo.png" style="width:150px; margin-top:-50px;
margin-left:-50px; margin-bottom:-50px;">
</div>
<div class="three_quarter">
<ul class="nospace clear">
<li class="one_third first">
<div class="block clear"><a href="#"><i class="fas fa-
phone"></i></a> <span><strong>Telepon Kami :</strong> <?php echo
$data_desc['no_telp_toko']; ?></span></div>
</li>
<li class="one_third">
L-35
envelope"></i></a> <span><strong>Email Kami :</strong> <?php echo
$data_desc['email_toko'];?></span></div>
</li>
<li class="one_third">
clock"></i></a> <span><strong> Senin. - Jumat. :</strong> <?php echo
$data_desc['jam_op']; ?></span></div>
</li>
</div>
</header>
</div>
<section class="hoc clear">
<nav id="mainav">
<ul class="clear">
<li><a href="index.php" class="active" style="text-decoration:
none;">Home</a></li>
<li><a style="text-decoration: none;"
href="produk.php">Produk</a></li>
<?php if(empty($_SESSION["keranjang"]) OR
!isset($_SESSION["keranjang"]))
{?>
<li><a href="#" style="text-decoration: none;" data-toggle="popover"
title="Perhatian" data-placement="top" data-content="Keranjang Anda
Kosong">Keranjang</a></li>
<?php }else{?>
<li><a href="keranjang.php" style="text-decoration:
none;">Keranjang</a></li>
<?php
} ?>
L-36
<?php if (isset($_SESSION["pelanggan"])): ?>
<li><a href="riwayat.php" style="text-decoration: none;">Riwayat
Belanja</a></li>
<li><a href="logout1.php" style="text-decoration:
none;">Logout</a></li>
<?php else: ?>
<li><a href="login1.php" style="text-decoration:
none;">Login</a></li>
<li><a href="daftar.php" style="text-decoration:
none;">Daftar</a></li>
<?php endif ?>
<li><a href="hubungikami.php" style="text-decoration:
none;">Tentang Kami</a></li>
<li><a href="galeri.php" style="text-decoration:
none;">Galeri</a></li>
</ul>
</nav>


</section>
</div>
<script
ipt>
L-37
<script
.js"></script>
<script
</script>
});
</script>
</body>
</html>
16. CONTROLLERS MENU (USER)
?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
L-38
<h2>Detail Pembelian</h2>
<?php
$ambil = $koneksi->query("SELECT * FROM pembelian JOIN pelanggan
ON pembelian.id_pelanggan=pelanggan.id_pelanggan WHERE
pembelian.id_pembelian='$_GET[id]'");
?>
<?php
$idpelangganyangbeli = $detail["id_pelanggan"];
$idpelangganyanglogin = $_SESSION["pelanggan"]["id_pelanggan"];
if ($idpelangganyangbeli!==$idpelangganyanglogin)
{
echo "<script>alert('Maaf,Tidak Bisa Di Akses');</script>";
exit();
}
?>
<p>
Tanggal: <?php echo $detail['tanggal_pembelian']; ?> <br>
Total: Rp. <?php echo number_format($detail['total_pembelian']); ?>
</p>
<div class="row">
<h3>Pelanggan</h3>
<strong><?php echo $detail['nama_pelanggan']; ?></strong><br>
<?php echo $detail['telepon_pelanggan']; ?><br>
<?php echo $detail['email_pelanggan']; ?>
L-39
</div>
<h3>Pembelian</h3>
<strong>No. Pembelian: <?php echo $detail['id_pembelian']; ?></strong>
<br>
<p>
Total: Rp. <?php echo number_format($detail['total_pembelian']);
?> <br>
</p>
</div>
<h3>Pengiriman</h3>
<strong><?php echo $detail['nama_kota']; ?></strong><br>
Ongkos Kirim: Rp. <?php echo number_format($detail['tarif']); ?>
<br>
Alamat: <?php echo $detail['alamat_pengiriman'] ?>
</div>
</div>
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
<th>Unit</th>
<th>SubTotal</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
L-40
<?php $ambil=$koneksi->query("SELECT * FROM
pembelian_produk WHERE
id_pembelian='$_GET[id]'"); ?>
<?php while($pecah=$ambil->fetch_assoc()){ ?>
<tr>
<td><?php echo $pecah['nama']; ?></td>
<td>Rp. <?php echo number_format($pecah['harga']);
?></td>
<td><?php echo $pecah['jumlah']; ?></td>
<td>Rp. <?php echo number_format($pecah['subharga']);
?></td>
</tr>
<?php $nomor++; ?>
<?php } ?>
</tbody>
</table>
<div class="row">
<div class="alert alert-danger">
<p>
Silahkan Melakukan Pembayaran Rp. <?php echo
number_format($detail['total_pembelian']); ?> <br>
<strong>BANK BCA 7650817511 Atas Nama Lasmiati</strong>
<strong>BANK BRI 325501030666531 Atas Nama Lasmiati</strong>
</p>
</div>
</div>
</div>
</div>
</section>
L-41
</body>
</html>
17. CONTROLLERS PEMBAYARAN (USER)
<?php
session_start();
if (!isset($_SESSION["pelanggan"]) OR empty($_SESSION["pelanggan"]))
{
echo "<script>alert('Silahkan Login');</script>";
exit();
}
$idpem = $_GET["id"];
$ambil = $koneksi->query("SELECT * FROM pembelian WHERE
id_pembelian='$idpem'");
$detpem = $ambil->fetch_assoc();
$id_pelanggan_beli = $detpem["id_pelanggan"];
$id_pelanggan_login = $_SESSION["pelanggan"]["id_pelanggan"];
if ($id_pelanggan_login !==$id_pelanggan_beli)
{
echo "<script>alert('Maaf Tidak Bisa Di Akses');</script>";
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
L-42
</head>
<body>
<h2>Konfirmasi Pembayaran</h2>
<p>Kirim Bukti Pembayaran Anda Disini</p>
<div class="alert alert-info">Total Tagihan Anda <strong>Rp. <?php echo
number_format($detpem["total_pembelian"]) ?></strong></div>
<form method="post" enctype="multipart/form-data">
<label>Nama Penyetor</label>
<input type="text" class="form-control" name="nama">
</div>
<label>Bank</label>
<input type="text" class="form-control" name="bank">
</div>
<label>Jumlah</label>
<input type="number" class="form-control" name="jumlah" min="1">
</div>
<label>Foto Bukti</label>
<input type="file" class="form-control" name="bukti">
<p class="text-danger">Foto bukti harus JPG maksimal 2MB</p>
</div>
<button class="btn btn-primary" name="kirim">Kirim</button>
</div>
L-43
<?php
if (isset($_POST["kirim"]))
{
$namabukti = $_FILES["bukti"]["name"];
$lokasibukti = $_FILES["bukti"]["tmp_name"];
$namafiks = date("YmdHis").$namabukti;
move_uploaded_file($lokasibukti, "bukti_pembayaran/$namafiks");
$nama = $_POST["nama"];
$bank = $_POST["bank"];
$jumlah = $_POST["jumlah"];
$tanggal = date("Y-m-d");
$koneksi->query("INSERT INTO
pembayaran(id_pembelian,nama,bank,jumlah,tanggal,bukti)
VALUES ('$idpem','$nama','$bank','$jumlah','$tanggal','$namafiks') ");
$koneksi->query("UPDATE pembelian SET status_pembelian='Sudah
Kirim Pembayaran' WHERE id_pembelian='$idpem'");
echo "<script>alert('Terimakasih Sudah Mengirimkan Bukti
Pembayaran');</script>";
}
?>
</body>
</html>
18. CONTROLLERS PROSES BERLANGGANAN (USER)

<?php
session_start();
L-44
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="sectiontitle">
<h6 class="heading" style="margin-bottom: 10px;">Berbagai Macam
Olahan Sayur Pare</h6>
<hr>
<p>Mia Paretoz</p>
</div>
<?php $ambil = $koneksi->query("SELECT * FROM produk"); ?>
<?php while($perproduk = $ambil->fetch_assoc()){ ?>
<article class="one_quarter" style="margin-top: 30px; width: 320px;
height:470px;"><a class="imgover" href="beli.php?id=<?php echo
$perproduk['id_produk']; ?>"><img style="width:300px; height:300px;"
src="foto_produk/<?php echo $perproduk['foto_produk']; ?>" alt=""></a>
L-45
<div class="excerpt">
<h6 class="heading"><?php echo $perproduk['nama_produk']; ?></h6>
<p><?php echo substr($perproduk['deskripsi_produk'],0,100); ?>...</p>
<p><strong>Rp. <?php echo number_format($perproduk['harga_produk']);
?></strong></p>
<footer><a href="beli.php?id=<?php echo $perproduk['id_produk'];
?>">Beli <i class="fas fa-angle-right"></i></a></footer>
</div>
</article>
<?php } ?>

</section>
</div>
</body>
<script
ipt>
<script
.js"></script>
<script
</script>
L-46
});
</script>
</html>
19. CONTROLLERS PEMBAYARAN (USER)
<?php
?>
<?php
$karakter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
$hasil_1 = str_shuffle($karakter);
?>
<?php
$nama = @$_REQUEST['nama_berlangganan'];
$email = @$_REQUEST['email_berlangganan'];
?>
<?php
// Import PHPMailer classes into the global namespace
// These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
// Load Composer's autoloader
require 'vendor/autoload.php';
// Instantiation and passing `true` enables exceptions
$mail = new PHPMailer(true);
$email_penerima=$email;
$nama_penerima=$nama;
$pesan ='Terimakasih Sudah Berlangganan di Toko R-14 Betta Farm';
/*$kode_pembayaran = @$_REQUEST['kode_bayar'];*/
/*$file_attachments=$_FILES['attachment']['tmp_name'];
$name_attachments=$_FILES['attachment']['name'];*/
try {
L-47
//Server settings
$mail->SMTPDebug = 0; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'smtp.gmail.com'; // Specify main and backup
SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'bettafarm14@gmail.com'; // SMTP username
$mail->Password = 'r14bettafarm'; // SMTP password
$mail->SMTPSecure = 'TLS'; // Enable TLS encryption, `ssl` also
accepted
$mail->Port = 587; // TCP port to connect to
//Recipients
$mail->setFrom('r-14bettafarm@bekasi.co', 'R-14 Betta Farm
Indonesia');
$mail->addAddress($email_penerima, $nama_penerima); //
Addrecipient
// Attachments
/*$mail->addAttachment($file_attachments, $name_attachments);*/
// Optional name
// Content
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Berlangganan';
$mail->Body = $pesan;
$mail->send();
$koneksi->query("INSERT into berlangganan (id_berlangganan,
nama_berlangganan, email_berlangganan) VALUES ('$hasil_1', '$nama',
'$email')");
header('location:index.php');
} catch (Exception $e) {

echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
L-48
}
?>
20. CONTROLLERS PROSES HUBUNGI KAMI (USER)
<?php
?>
<?php
$karakter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
$hasil_1 = str_shuffle($karakter);
?>
<?php
$nama_testi = @$_REQUEST['nama_testi'];
$email = @$_REQUEST['email_testi'];
$pesan_web = @$_REQUEST['comment'];
$koneksi->query("INSERT into testimoni (id_testi, nama_testi, email_testi,
pesan) VALUES ('$hasil_1', '$nama_testi', '$email','$pesan_web')");
echo "<script>alert('Terimakasih Telah Memberikan Testimoni');</script>";
echo "<script>location='hubungikami.php';</script>";
?>
?>
21. CONTROLLERS RIWAYAT (USER)
<?php
session_start();
if (!isset($_SESSION["pelanggan"]) OR empty($_SESSION["pelanggan"]))
{
echo "<script>alert('Silahkan Login');</script>";
exit();
}
?>
L-49
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="riwayat">
<h3>Riwayat Belanja <?php echo
$_SESSION["pelanggan"]["nama_pelanggan"] ?></h3>
<thead>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Status</th>
<th>Total</th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
<?php
$nomor=1;
$id_pelanggan = $_SESSION["pelanggan"]['id_pelanggan'];
$ambil = $koneksi->query("SELECT * FROM pembelian WHERE
id_pelanggan='$id_pelanggan'");
L-50
while($pecah = $ambil->fetch_assoc()){
?>
<tr>
<td><?php echo $pecah["tanggal_pembelian"] ?></td> <td>
<?php echo $pecah["status_pembelian"] ?>
<br>
<?php if (!empty($pecah['resi_pengiriman'])): ?>
Resi Pengiriman: <?php echo $pecah['resi_pengiriman']; ?>
<?php endif ?>
</td>
<td>Rp. <?php echo number_format($pecah["total_pembelian"]) ?></td>
<td>

<?php if ($pecah['status_pembelian']=="Pending"): ?>
<a href="nota.php?id=<?php echo $pecah["id_pembelian"] ?>" class="btn
btn-warning">Nota</a>
<a href="pembayaran.php?id=<?php echo $pecah["id_pembelian"]; ?>"
class="btn btn-warning">Input Pembayaran</a>
<?php endif ?>
<?php if ($pecah['status_pembelian']=="Barang Di Kirim"): ?>
<a href="lihat_pembayaran.php?id=<?php echo $pecah["id_pembelian"];
?>" class="btn btn-danger">Lihat Pembayaran</a>
<a href="barang_sampai.php?id_pembelian=<?php echo
$pecah["id_pembelian"]; ?>" class="btn btn-success">Barang Sampai</a>
<?php endif ?>
<?php if ($pecah['status_pembelian']=="Pesanan Dibatalkan"): ?>
L-51
<?php endif ?>
<?php if ($pecah['status_pembelian']=="Sudah Kirim Pembayaran"): ?>
?>" class="btn btn-danger">Lihat Pembayaran</a>
<?php endif ?>
<?php if ($pecah['status_pembelian']=="Barang Telah Sampai Di
Pembeli"): ?>
?>" class="btn btn-danger">Bukti Pembayaran</a>
<?php endif ?>
</td>
</tr>
<?php $nomor++; ?>
<?php } ?>
</tbody>
</table>
</div>
</section>
<?php
include 'footer.php';
?>
</body>
L-52
<script
ipt>
<script
.js"></script>
<script
</script>
});
</script>
</html>
22. CONTROLLERS ABOUT (ADMIN)
<?php
session_start();
include '../connect.php';
if (!isset($_SESSION['admin']))
{
echo "<script>alert('Anda Harus Login');</script>";
echo "<script>location='login.php';</script>";
header('location:login.php');
exit();
}
$logoutAction = $_SERVER['PHP_SELF']."?doLogout=true";
if ((isset($_SERVER['QUERY_STRING'])) &&
($_SERVER['QUERY_STRING'] != "")){
$logoutAction .="&". htmlentities($_SERVER['QUERY_STRING']);
}
L-53
if ((isset($_GET['doLogout'])) &&($_GET['doLogout']=="true")){
$_SESSION['MM_Username'] = NULL;
$_SESSION['MM_UserGroup'] = NULL;
$_SESSION['PrevUrl'] = NULL;
unset($_SESSION['MM_Username']);
unset($_SESSION['MM_UserGroup']);
unset($_SESSION['PrevUrl']);
$logoutGoTo = "login.php";
if ($logoutGoTo) {
header("Location: $logoutGoTo");
session_destroy();
exit;
}
}
$tentang = $koneksi->query("select * from about");
$data_tentang = $tentang->fetch_array();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Mia Paretoz - Admin</title>
<link href='../images/logo.png' rel='shortcut icon'>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"
type="text/css">
L-54
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,40
0,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark
accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center"
href="index.php">
<div class="sidebar-brand-text mx-3"><img src="../images/logo.png"
style="width:100px;"></div>
</a>
<hr class="sidebar-divider my-0">
<li class="nav-item">
<a class="nav-link" href="index.php">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<a class="nav-link" href="desc.php">
<i class="fas fa-fw fa-book"></i>
<span>Tentang Kami</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">
<span>Tentang Pare</span></a>
</li>
L-55
<a class="nav-link" href="gambar.php">
<span>Gambar Pare</span></a>
</li>
<a class="nav-link" href="kategori.php">
<span>Kategori</span></a>
</li>
<a class="nav-link" href="produk.php">
<span>Produk</span></a>
</li>
<a class="nav-link" href="pembelian.php">
<span>Pembelian</span></a>
</li>
<a class="nav-link" href="laporan.php">
<span>Laporan</span></a>
</li>
<a class="nav-link" href="pelanggan.php">
<span>Pelanggan</span></a>
</li>
<a class="nav-link" href="testimoni.php">
L-56
<span>Testimoni</span></a>
</li>
<hr class="sidebar-divider">
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0"
id="sidebarToggle"></button>
</div>
</ul>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4
static-top shadow">
<button id="sidebarToggleTop" class="btn btn-link d-md-none
rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small"><?php
echo $_SESSION['nama_lengkap']; ?></span>
</a>
<div class="dropdown-menu dropdown-menu-right shadow
animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#" data-toggle="modal" data-
target="#logoutModal">
L-57
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-
400"></i>
Logout
</a>
<a class="dropdown-item" href="admin_profile.php">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profil
</a>
</div>
</li>
</ul>
</nav>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Tentang
Pare</h6>
</div>
<div class="card-body">
<textarea name="tentang" class="form-control" rows="5">
<?php echo $data_tentang['isi']; ?>
</textarea>
</div>
<button class="btn btn-success" name="simpan"><i
class="glyphicon glyphicon-saved"></i> Simpan</a></button>
</form>
</div>
<div class="footer">
<a href="index.php" class="btn btn-danger" style="float: right; margin-
right: 20px; margin-bottom: 10px;">Kembali</a>
L-58
</div>
</div>
<?php
if (isset($_POST['simpan'])) {
$isi = $_POST['tentang'];
$koneksi->query("UPDATE about SET isi='$isi' where id_abt = 1");
echo "<script>alert('Tentang Pare Telah diubah');</script>";
echo "<script>location='about.php';</script>";
}
?>
</div>
</div>
</div>
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Keluar</h5>
<button class="close" type="button" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Apakah Anda Ingin Keluar ?</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-
dismiss="modal">Cancel</button>
L-59
<a class="btn btn-primary" href="<?php echo $logoutAction
?>">Logout</a>
</div>
</div>
</div>
</div>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
</body>
</html>
23. CONTROLLERS ADMIN PROFILE (ADMIN)
<?php
session_start();
{
exit();
}
}
L-60
if ($logoutGoTo) {
session_destroy();
exit;
}
}
$admin = $koneksi->query("select * from admin where id_admin = 1");
$data_admin = $admin->fetch_array();
?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
type="text/css">
L-61
<link
</head>
<div id="wrapper">
href="index.php">
</a>
</li>
</li>
<a class="nav-link" href="about.php">
</li>
L-62
</li>
</li>
</li>
</li>
</li>
</li>
L-63
</li>
</div>
</ul>
<div id="content">
static-top shadow">
</button>
expanded="false">
</a>
L-64
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
<h6 class="m-0 font-weight-bold text-primary">Data Admin</h6>
</div>
<label>Username</label>
<input class="form-control" type="text" value="<?php echo
$data_admin['username']; ?>" name="user">
</div>
<label>Password</label>
$data_admin['password']; ?>" name="pass">
</div>
<label>Nama Lengkap</label>
L-65
$data_admin['nama_lengkap']; ?>" name="nama">
</div>
</form>
</div>
</div>
<?php
$user = $_POST['user'];
$pw = $_POST['pass'];
$nama = $_POST['nama'];
$koneksi->query("UPDATE admin SET

username='$user',password='$pw',nama_lengkap='$nama' where id_admin
= 1");
echo "<script>alert('Data Admin Telah diubah');</script>";
echo "<script>location='admin_profile.php';</script>";
}
?>
</div>
</div>
</div>
</a>
L-66
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
24. CONTROLLERS ADMIN BATALKAN PESANAN PROSES
(ADMIN)
<?php
$koneksi = new mysqli("localhost","root","","penulisanilmiah1");
L-67
$id_pembelian = @$_REQUEST['id_pembelian'];
$koneksi->query("UPDATE pembelian SET status_pembelian='Pesanan
Dibatalkan' WHERE id_pembelian='$id_pembelian'");
header("location:pembelian.php");
?>
25. CONTROLLERS DESC (ADMIN)
<?php
session_start();
{
exit();
}
}
if ($logoutGoTo) {
L-68
session_destroy();
exit;
}
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
type="text/css">
<link
</head>
<div id="wrapper">
L-69
href="index.php">
</a>
</li>
</li>
</li>
</li>
</li>
L-70
</li>
</li>
</li>
</li>
</li>
</div>
</ul>
L-71
<div id="content">
static-top shadow">
</button>
expanded="false">
</a>
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
L-72
</ul>
</nav>
<h6 class="m-0 font-weight-bold text-primary">Tentang
Kami</h6>
</div>
<label>No Telepon</label>
$data_desc['no_telp_toko']; ?>" name="no_tlp">
</div>
<label>Email Toko</label>
$data_desc['email_toko']; ?>" name="email_tk">
</div>
<label>Jam Operasional Toko</label>
$data_desc['jam_op']; ?>" name="jamop">
</div>
<label>Alamat</label>
<textarea name="alamat" class="form-control" rows="5">
<?php echo $data_desc['alamat']; ?>
</textarea>
</div>
L-73
<label>Tentang Kami</label>
<textarea name="tentang" class="form-control" rows="5">
<?php echo $data_desc['tentang_kami']; ?>
</textarea>
</div>
</form>
</div>
<a href="index.php" class="btn btn-danger" style="float: right;
margin-right: 20px; margin-bottom: 10px;">Kembali</a>
</div>
</div>
<?php
$notlp = $_POST['no_tlp'];
$emailtk = $_POST['email_tk'];
$jam = $_POST['jamop'];
$almt = $_POST['alamat'];
$ttg = $_POST['tentang'];
$koneksi->query("UPDATE desc_toko SET
no_telp_toko='$notlp',email_toko='$emailtk',jam_op='$jam',alamat='$almt',
tentang_kami='$ttg' where idd = 1");
echo "<script>alert('Deskripsi Toko Telah diubah');</script>";
echo "<script>location='desc.php';</script>";
}
?>
</div>
</div>
</div>
L-74
</a>
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
L-75
</body>
</html>
26. CONTROLLERS DETAIL (ADMIN)
<?php
session_start();
{
exit();
}
// ** Logout the current user. **
}
//to fully log out a visitor we need to clear the session varialbles
if ($logoutGoTo) {
L-76
session_destroy();
exit;
}
}
$ambil = $koneksi->query("SELECT * FROM pembelian JOIN pelanggan
ON pembelian.id_pelanggan=pelanggan.id_pelanggan WHERE
pembelian.id_pembelian='$_GET[id]'");
?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">

type="text/css">
<link

<style type="text/css"> .empty{
L-77
cursor: default;
}
</style>
</head>

<div id="wrapper">


href="index.php">
</a>


</li>
</li>
L-78
</li>
</li>
</li>
</li>
</li>
</li>
L-79
</li>
</li>



</div>
</ul>



<div id="content">

static-top shadow">

</button>

L-80


expanded="false">
</a>

400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>


L-81
<div class="container-fluid">
<div class="row">

<div class="col-xl-4 col-lg-5">
<h6 class="m-0 font-weight-bold text-
primary">Pembelian</h6>
</div>
<strong>Status: <?php echo $detail["status_pembelian"];
?></strong> <br>
<p>
Total: Rp. <?php echo
number_format($detail['total_pembelian']); ?> <br>
</p>
</div>
</div>
</div>

<h6 class="m-0 font-weight-bold text-primary">Pelanggan</h6>
</div>
<strong><?php echo $detail['nama_pelanggan']; ?></strong> <br>
<p>
Nomer Telepon: <?php echo $detail['telepon_pelanggan']; ?>
<br>
L-82
Email: <?php echo $detail['email_pelanggan']; ?>
</p>
</div>
</div>
</div>

<h6 class="m-0 font-weight-bold text-
primary">Pengiriman</h6>
</div>
<strong><?php echo $detail["nama_kota"]; ?></strong><br>
<p>
Tarif: Rp. <?php echo number_format($detail["tarif"]);
?><br>
Alamat: <?php echo $detail["alamat_pengiriman"]; ?>
</p>
</div>
</div>
</div>
</div>

<h6 class="m-0 font-weight-bold text-primary">Data
Pembelian</h6>
</div>
<div class="table-responsive">
L-83
<table class="table table-bordered" id="dataTable" width="100%"
cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
<th>Jumlah</th>
<th>SubTotal</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
pembelian_produk JOIN produk ON
pembelian_produk.id_produk=produk.id_produk WHERE
pembelian_produk.id_pembelian='$_GET[id]'"); ?>
<?php while($pecah=$ambil->fetch_assoc()){ ?>
<tr>
<td><?php echo $pecah['nama_produk']; ?></td>
<td>Rp. <?php echo number_format($pecah['harga_produk']);
?></td>
<td><?php echo $pecah['jumlah']; ?></td>
<td>
Rp. <?php echo
number_format($pecah['harga_produk']*$pecah['jumlah']); ?>
</td>
</tr>
<?php $nomor++; ?>
<?php } ?>
L-84
</tbody>
</table>
</div>
</div>
<a href="pembelian.php" class="btn btn-danger" style="float: right;
margin-right: 20px; margin-bottom: 10px;">Kembali</a>
</div>
</div>
</div>

</div>



</div>

</div>


</a>

L-85
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>




<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
L-86

<script src="js/demo/datatables-demo.js"></script>
</body>
</html>
27. CONTROLLERS EDIT PRODUK (ADMIN)
<?php
session_start();
{
exit();
}
id_produk='$_GET[id]'");
?>
<?php
$datakategori = array();
$ambil = $koneksi->query("SELECT * FROM kategori");
while($tiap = $ambil->fetch_assoc())
{
$datakategori[] = $tiap;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
L-87
shrink-to-fit=no">
type="text/css">
<link
.empty{
cursor: default;
}
</style>
</head>
<div id="wrapper">
href="index.php">
</a>
L-88
</li>
</li>
</li>
</li>
</li>
</li>
L-89
</li>
</li>
</li>
</li>
</div>
</ul>
<div id="content">
static-top shadow">
L-90
</button>

expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600
small">Lasmiati</span>
</a>
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
<h6 class="m-0 font-weight-bold text-primary">Kategori</h6>
L-91
</div>
<label>Kategori</label>
<select class="form-control" name="id_kategori">
<option value="">Pilih Kategori</option>
<?php foreach ($datakategori as $key => $value): ?>
<option value="<?php echo $value["id_kategori"] ?>" <?php
if($pecah["id_kategori"]==$value["id_kategori"]){ echo "selected"; } ?> >
<?php echo $value["nama_kategori"] ?>
</option>
<?php endforeach ?>
</select>
</div>
<label>Nama Produk</label>
<input type="text" name="nama" class="form-control"
value="<?php echo $pecah
['nama_produk']; ?>">
</div>
<label>Harga Rp</label>
<input type="number" class="form-control" name="harga"
['harga_produk']; ?>">
</div>
<label>Stok</label>
<input type="number" class="form-control" name="stok"
L-92
['stok_produk']; ?>">
</div>
<img src="../foto_produk/<?php echo $pecah['foto_produk']
?>" width="300">
</div>
<label>Ganti Foto</label>
<input type="file" name="foto" class="form-control">
</div>
<label>Deskripsi</label>
<textarea name="deskripsi" class="form-control" rows="10">
<?php echo $pecah['deskripsi_produk']; ?>
</textarea>
</div>
<button class="btn btn-success" name="ubah"><i
</form>
</div>
</div>
</div>
</div>
<?php
if (isset($_POST['ubah']))
{
$namafoto=$_FILES['foto']['name'];
$lokasifoto = $_FILES['foto']['tmp_name'];
if (!empty($lokasifoto))
{
move_uploaded_file($lokasifoto, "../foto_produk/$namafoto");
L-93
$koneksi->query("UPDATE produk SET
nama_produk='$_POST[nama]',
harga_produk='$_POST[harga]',stok_produk='$_POST[stok]',
foto_produk='$namafoto',deskripsi_produk='$_POST[deskripsi]'
WHERE id_produk='$_GET[id]'");
}
else
{
$koneksi->query("UPDATE produk SET
nama_produk='$_POST[nama]',
harga_produk='$_POST[harga]',stok_produk='$_POST[stok]',
deskripsi_produk='$_POST[deskripsi]' WHERE id_produk='$_GET[id]'");
}
echo "<script>alert('Data produk Telah Di Ubah');</script>";
}
?>
</div>
</div>
</a>
label="Close">
L-94
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
28. CONTROLLERS GAMBAR (ADMIN)
?php
session_start();
{
exit();
L-95
}
}
if ($logoutGoTo) {
session_destroy();
exit;
}
}
$gambar = $koneksi->query("select * from gambar");
$data_gmb = $gambar->fetch_array();
?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
L-96
type="text/css">
<link
</head>
<div id="wrapper">
href="index.php">
</a>
</li>
</li>
L-97
</li>
</li>
</li>
</li>
</li>
</li>
L-98
</li>
</li>
</div>
</ul>
<div id="content">
static-top shadow">
</button>
expanded="false">
</a>
L-99
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
<h6 class="m-0 font-weight-bold text-primary">Daftar Gambar
Halaman Tentang Kami</h6>
</div>
<label>Gambar 1</label>
<br>
<img style="margin-bottom: 10px;" height="200px;"
src="../images/gmb/<?php echo $data_gmb['gmb1'] ?>" alt="Gambar Tidak
Ditemukan">
<input type="file" name="gmb1" class="form-control">
</div>
L-100
<button class="btn btn-success" name="ubah1"><i
class="glyphicon glyphicon-saved"></i>Ubah Gambar</a></button>
</form>
</div>
</div>
<?php
if (isset($_POST['ubah1']))
{
$namafoto=$_FILES['gmb1']['name'];
$lokasifoto = $_FILES['gmb1']['tmp_name'];
move_uploaded_file($lokasifoto, "../images/gmb/$namafoto");
$koneksi->query("UPDATE gambar SET gmb1='$namafoto'
WHERE id_gmb='XVAD2JDL60'");
echo "<script>alert('Gambar Berhasil Diubah');</script>";

echo "<script>location='gambar.php';</script>";
}
?>
<?php
if (isset($_POST['ubah2']))
{
$namafoto=$_FILES['gmb2']['name'];
$lokasifoto = $_FILES['gmb2']['tmp_name'];
move_uploaded_file($lokasifoto, "../images/gmb/$namafoto");
$koneksi->query("UPDATE gambar SET gmb2='$namafoto'
WHERE id_gmb='XVAD2JDL60'");
echo "<script>alert('Gambar Berhasil Diubah');</script>";

echo "<script>location='gambar.php';</script>";
L-101
}
?>
</div>
</div>
</div>
</a>
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
L-102
</body>
</html>
29. CONTROLLERS HAPUS BERLANGGANAN (ADMIN)
<?php
$id = $_GET['id_berlangganan'];
// menghapus data dari database
$sql_delete = $koneksi->query("delete from berlangganan where
id_berlangganan='$id'");
// mengalihkan halaman kembali ke index.php
header("location:index.php");
?>
30. CONTROLLERS HAPUS PRODUK (ADMIN)
<?php
$fotoproduk = $pecah['foto_produk'];
if (file_exists("../foto_produk/$fotoproduk"));
{
unlink("../foto_produk/$fotoproduk");
}
$koneksi->query("DELETE FROM produk WHERE
header("location:produk.php");
L-103
?>
31. CONTROLLERS HAPUS TESTI (ADMIN)
<?php
$id = $_GET['id_testi'];
// menghapus data dari database
$sql_delete = $koneksi->query("delete from testimoni where
id_testi='$id'");
// mengalihkan halaman kembali ke index.php
echo "<script>alert('Testimoni Sudah Terhapus');</script>";
echo "<script>location='testimoni.php';</script>";
?>
32. CONTROLLERS ADMIN INDEX (ADMIN)
<?php
session_start();
{
exit();
}
}
L-104
if ($logoutGoTo) {
session_destroy();
exit;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
type="text/css">
<link
</head>
L-105
<div id="wrapper">
href="index.php">
</a>
<a class="nav-link" href="#">
</li>
</li>
</li>
</li>
L-106
</li>
</li>
</li>
</li>
</li>
</li>
L-107
</div>
</ul>
<div id="content">
static-top shadow">
</button>
expanded="false">
</a>
400"></i>
Logout
</a>
L-108
Profil
</a>
</div>
</li>
</ul>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-
4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
</div>
<div class="row">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-
uppercase mb-1">Kategori</div>
<a style="text-decoration: none;" href="kategori.php"><div
class="h5 mb-0 font-weight-bold text-gray-800">Daftar
Kategori</div></a>
</div>
<div class="col-auto">
<i class="fas fa-user fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
L-109
<div class="card border-left-success shadow h-100 py-2">
uppercase mb-1">Produk</div>
<a style="text-decoration: none;" href="produk.php"><div
class="h5 mb-0 font-weight-bold text-gray-800">Daftar Produk</div></a>
</div>
<i class="fas fa-boxes fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
uppercase mb-1">Pembelian</div>
<a style="text-decoration: none;"
href="pembelian.php"><div class="h5 mb-0 font-weight-bold text-gray-
800">Daftar Pembelian</div></a>
</div>
<i class="fas fa-users fa-2x text-gray-300"></i>
</div>
</div>
L-110
</div>
</div>
</div>
uppercase mb-1">Laporan</div>
<a style="text-decoration: none;" href="laporan.php"><div
class="h5 mb-0 font-weight-bold text-gray-800">Laporan
Pembelian</div></a>
</div>
<i class="fas fa-user fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
uppercase mb-1">Pelanggan</div>
<a style="text-decoration: none;"
href="pelanggan.php"><div class="h5 mb-0 font-weight-bold text-gray-
800">Daftar Pelanggan</div></a>
L-111
</div>
<i class="fas fa-users fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h6 class="m-0 font-weight-bold text-primary">Pembelian</h6>
</div>
cellspacing="0">
<thead>
<tr>
<th>No. </th>
<th>Nama Pelanggan</th>
<th>Tanggal</th>
<th>Status Pembelian</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
L-112
<?php $ambil=$koneksi->query("SELECT * FROM pembelian
JOIN pelanggan ON pembelian. id_pelanggan=pelanggan.id_pelanggan
order by tanggal_pembelian DESC"); ?>
<tr>
<td><?php echo $pecah['nama_pelanggan']; ?></td>
<td><?php echo $pecah['tanggal_pembelian']; ?></td>
<td><?php echo $pecah['status_pembelian']; ?></td>
<td>Rp. <?php echo
number_format($pecah['total_pembelian']); ?></td>
</tr>
<?php $nomor++ ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
L-113
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
33. CONTROLLERS ADMIN PROFILE (ADMIN)
<?php
session_start();
{
L-114
exit();
}
}
if ($logoutGoTo) {
session_destroy();
exit;
}
}
$semuadata = array();
{
$semuadata[] = $tiap;
}
?>
L-115
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
type="text/css">
<link
.empty{
cursor: default;
}
</style>
</head>
<div id="wrapper">
href="index.php">
L-116
</a>
</li>
</li>
</li>
</li>
</li>
L-117
</li>
</li>
</li>
</li>
</li>
</div>
</ul>
<div id="content">
L-118
static-top shadow">
</button>
expanded="false">
</a>
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
L-119
4">
<h1 class="h3 mb-0 text-gray-800">Data Kategori Produk</h1>
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary
shadow-sm" data-toggle="modal" data-target="#admin"><i class="fas fa-
download fa-sm text-white-50"></i> Input Kategori Produk</a>
</div>
<div class="modal fade" id="admin" tabindex="-1" role="dialog"
<h5 class="modal-title" id="exampleModalLabel">Input
Kategori Produk</h5>
label="Close">
</button>
</div>
<div class="modal-body">
<input type="text" class="form-control" name="kate">
</div>
</div>
<button class="btn btn-primary"
name="save">Simpan</button>
</form>
L-120
</div>
</div>
</div>
</div>
<?php
if (isset($_POST['save'])) {
$kate = $_POST['kate'];
$koneksi->query("INSERT into kategori(nama_kategori) VALUES
('$kate')");
echo "<script>alert('Kategori Berhasil Diinput');</script>";
echo "<script>location='kategori.php';</script>";
}
?>
<h6 class="m-0 font-weight-bold text-primary">Kategori</h6>
</div>
cellspacing="0">
<thead>
<tr>
<th>No</th>
<td>Kategori</td>
<td>Aksi</td>
</tr>
</thead>
<tbody>
L-121
<?php foreach ($semuadata as $key => $value): ?>
<tr>
<td><?php echo $key+1 ?></td>
<td><?php echo $value["nama_kategori"] ?></td>
<td>
<a href="hapus_kategori.php?id_kategori=<?php echo
$value['id_kategori']; ?>" class="btn btn-danger btn-user btn-
block">Hapus</a>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
label="Close">
L-122
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
34. CONTROLLERS LAPORAN (ADMIN)

<?php
session_start();
{
L-123
exit();
}
}
if ($logoutGoTo) {
session_destroy();
exit;
}
}
$semuadata=array();
$tgl_mulai="-";
$tgl_selesai="-";
if (isset($_POST["kirim"]))
{
$tgl_mulai = $_POST["tglm"];
$tgl_selesai = $_POST['tgls'];
L-124
$ambil = $koneksi->query("SELECT * FROM pembelian pm LEFT JOIN
pelanggan pl ON pm.id_pelanggan=pl.id_pelanggan WHERE
tanggal_pembelian BETWEEN '$tgl_mulai' AND '$tgl_selesai' ");
while($pecah = $ambil->fetch_assoc())
{
$semuadata[]=$pecah;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
type="text/css">
<link
.empty{
cursor: default;
}
L-125
</style>
</head>
<div id="wrapper">
href="index.php">
</a>
</li>
</li>
</li>
L-126
</li>
</li>
</li>
</li>
</li>
</li>
</li>
L-127
</div>
</ul>
<div id="content">
static-top shadow">
</button>

expanded="false">
</a>
400"></i>
Logout
L-128
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
4">
<h1 class="h3 mb-0 text-gray-800">Laporan Pembelian</h1>
<a href="print_pembelian.php" class="d-none d-sm-inline-block btn
btn-sm btn-primary shadow-sm" target="blank"><i class="fas fa-download
fa-sm text-white-50"></i> Print Laporan Data Pembelian</a>
</div>
<h6 class="m-0 font-weight-bold text-primary">Laporan
Pembelian dari <?php echo $tgl_mulai ?> hingga <?php echo $tgl_selesai
?></h6>
</div>
<hr>
<div class="row">
<label>Tanggal Mulai</label>
L-129
<input type="date" class="form-control" name="tglm"
value="<?php echo $tgl_mulai?>">
</div>
</div>
<label>Tanggal Selesai</label>
<input type="date" class="form-control" name="tgls"
value="<?php echo $tgl_selesai ?>">
</div>
</div>
<label> </label><br>
<button class="btn btn-success" name="kirim">Lihat</button>
</div>
</div>
</form>
</div>
</div>
<h6 class="m-0 font-weight-bold text-primary">Data Laporan
Pembelian</h6>
</div>
cellspacing="0">
<thead>
<tr>
<th>No</th>
L-130
<th>Pelanggan</th>
<th>Tanggal</th>
<th>Jumlah</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $total=0 ?>
<?php foreach ($semuadata as $key => $value): ?>
<?php $total+=$value['total_pembelian'] ?>
<tr>
<td><?php echo $key+1; ?></td>
<td><?php echo $value["nama_pelanggan"] ?></td>
<td><?php echo $value["tanggal_pembelian"] ?></td>
<td>Rp. <?php echo
number_format($value["total_pembelian"]) ?></td>
<td><?php echo $value["status_pembelian"] ?></td>
</tr>
<?php endforeach ?>
</tbody>
<tfoot>
<tr>
<th colspan="3">Total</th>
<th>Rp. <?php echo number_format($total) ?></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
L-131
</div>
</div>
</div>
</div>
</a>
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
L-132
</body>
</html>
35. CONTROLLERS ADMIN LOGIN (ADMIN)
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
type="text/css">
<link
.login-box{
width: 400px;
L-133
height: auto;
background-color: white;
margin-top: 100px;
border-radius: 20px;
padding: 20px;
}
</style>
</head>
<body class="bg-gradient-primary">
<center>
<div class="login-box">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Mia Paretoz - Admin</h1>
</div>
<form role="form" class="user" method="post">
<input type="text" class="form-control form-control-user"
placeholder="Masukan Username..." name="user">
</div>
<input type="password" class="form-control form-control-
user" placeholder="Masukan Password..." name="pass">
</div>
<hr>
<input type="submit" name="login" value="login" class="btn
btn-primary btn-user btn-block">
</form>
</div>
<?php
if (isset($_POST['login']))
L-134
{
$ambil = $koneksi->query("SELECT * FROM admin
WHERE username='$_POST[user]' AND password ='$_POST[pass]'");
$result = mysqli_num_rows($ambil);
$data = mysqli_fetch_array($ambil);
if ($result>0)
{
$_SESSION['user'] = $data['username'];
$_SESSION['pass'] = $data['password'];
$_SESSION['nama_lengkap'] = $data['nama_lengkap'];
$_SESSION['admin'] = "login";
echo "<div class='alert alert-info'>Login Sukses</div>";
echo "<meta http-equiv='refresh'
content='1;url=index.php'>";
}
else
{
echo "<div class='alert alert-danger'>Login Gagal</div>";
echo "<meta http-equiv='refresh'
content='1;url=login.php'>";
}
}
?>
</div>
</center>
L-135
</body>
</html>
36. CONTROLLERS PELANGGAN (ADMIN)
<?php
session_start();
{
exit();
}
}
if ($logoutGoTo) {
session_destroy();
exit;
L-136
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
type="text/css">
<link
.empty{
cursor: default;
}
</style>
</head>
<div id="wrapper">
L-137
href="index.php">
</a>
</li>
</li>
</li>
</li>
</li>
L-138
</li>
</li>
</li>
</li>
</li>
</div>
</ul>
L-139
<div id="content">
static-top shadow">
</button>
expanded="false">
</a>
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
L-140
</ul>
</nav>
<h6 class="m-0 font-weight-bold text-primary">Pelanggan</h6>
</div>
cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Email</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
pelanggan"); ?>
<tr>
<td><?php echo $pecah['email_pelanggan']; ?></td>
<td><?php echo $pecah['telepon_pelanggan']; ?></td>
L-141
</tr>
<?php $nomor++ ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
label="Close">
</button>
</div>
L-142
?>">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
37. CONTROLLERS PEMBAYARAN (ADMIN)
<?php
session_start();
exit();
// ** Logout the current user. **
L-143
//to fully log out a visitor we need to clear the session varialbles
if ($logoutGoTo) {
session_destroy();
exit;
?>
L-144
<!DOCTYPE html>
<html lang="en">
<head>

shrink-to-fit=no">

type="text/css">
<link
.empty{
cursor: default;
L-145
}
</style>
</head>

<div id="wrapper">




href="index.php">

</a>


</li>
L-146
</li>
<span>Tentang Ikan Cupang</span></a>
</li>
<span>Gambar Ikan</span></a>
</li>
</li>
L-147
</li>
</li>
</li>
</li>
L-148
</li>



</div>
</ul>



<div id="content">


static-top shadow">


</button>
L-149



expanded="false">

</a>




400"></i>
Logout
</a>
Profil
</a>
L-150
</div>
</li>
</ul>
</nav>



<h6 class="m-0 font-weight-bold text-primary">Detail

Pembayaran</h6>
</div>
<h2>Data Pembayaran</h2>
<?php
$id_pembelian = $_GET['id'];
$ambil = $koneksi->query("SELECT * FROM pembayaran

WHERE id_pembelian='$id_pembelian'");
?>
<div class="row">
L-151
<table class="table">
<tr>
<th>Nama</th>
<td><?php echo $detail['nama'] ?></td>
</tr>
<tr>
<th>Bank</th>
<td><?php echo $detail['bank'] ?></td>
</tr>
<tr>
<th>Jumlah</th>
<td>Rp. <?php echo number_format($detail['jumlah']) ?></td>
</tr>
<tr>
<th>Tanggal</th>
<td><?php echo $detail['tanggal'] ?></td>
</tr>
</table>
</div>
<img style="width: 450px;" src="../bukti_pembayaran/<?php

echo $detail['bukti'] ?>" alt="" class="img-responsive">
</div>
L-152
</div>
<label>No Resi Pengiriman</label>
<input type="text" class="form-control" name="resi">
</div>
<label>Status</label>
<select class="form-control" name="status">
<option value="">Pilih Status</option>
<option value="Barang Di Kirim">Barang Dikirim</option>
<option value="Batal">Batal</option>
</select>
</div>
<button class="btn btn-primary" name="proses">Proses</button>
</form>
<?php
if (isset($_POST["proses"]))
$resi = $_POST["resi"];
$status = $_POST["status"];
L-153
$koneksi->query("UPDATE pembelian SET resi_pengiriman='$resi',
status_pembelian='$status' WHERE id_pembelian='$id_pembelian'");
echo "<script>alert('Data Pembelian Terupdate');</script>";
echo "<script>location='pembelian.php';</script>";
?>
</div>
</div>
</div>

</div>



</div>

L-154
</div>


</a>


label="Close">
</button>
</div>


?>">Logout</a>
L-155
</div>
</div>
</div>
</div>
</body>
</html>
38. CONTROLLERS ADMIN PEMBELIAN (ADMIN)

<?php
session_start();
{
L-156
exit();
}
}
if ($logoutGoTo) {
session_destroy();
exit;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
L-157
shrink-to-fit=no">
type="text/css">
<link
.empty{
cursor: default;
}
</style>
</head>
<div id="wrapper">
href="index.php">
</a>
L-158
</li>
</li>
</li>
</li>
</li>
</li>
L-159
</li>
</li>
</li>
</li>
</div>
</ul>
<div id="content">
static-top shadow">
L-160
</button>

expanded="false">
</a>
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
L-161
<h6 class="m-0 font-weight-bold text-primary">Data
Pembelian</h6>
</div>
cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Status Pembelian</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
<?php $ambil=$koneksi->query("SELECT * FROM pembelian
JOIN pelanggan ON pembelian.id_pelanggan=pelanggan.id_pelanggan
order by tanggal_pembelian DESC"); ?>
<?php while($pecah = $ambil->fetch_assoc()){ ?>
<tr>
<td><?php echo $pecah['tanggal_pembelian']; ?></td>
<td><?php echo $pecah['status_pembelian']; ?></td>
<td>Rp. <?php echo
number_format($pecah['total_pembelian']); ?></td>
<td>
L-162
<a href="detail.php?id=<?php echo $pecah['id_pembelian']; ?>" class="btn
btn-info">Detail</a>
<?php if ($pecah['status_pembelian']=="Sudah Kirim Pembayaran"): ?>
<a href="pembayaran.php?id=<?php echo $pecah['id_pembelian'] ?>"
class="btn btn-success">Pembayaran</a>
<?php endif ?>
<?php if ($pecah['status_pembelian']=="Pending"): ?>
<a
href="batalkan_pesanan_proses.php?id_pembelian=<?php echo
$pecah['id_pembelian'] ?>" class="btn btn-danger">Batalkan Pesanan</a>
<?php endif ?>
<?php if ($pecah['status_pembelian']=="Batal"): ?>
<a href="#" class="btn btn-danger empty">Dibatalkan</a>
<?php endif ?>
</td>
</tr>
<?php $nomor++; ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
L-163
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
39. CONTROLLERS PRINT PEMBELIAN (ADMIN)
L-164
<?php
session_start();
$ambil = $koneksi->query("SELECT * FROM pembelian pm LEFT JOIN
pelanggan pl ON pm.id_pelanggan=pl.id_pelanggan WHERE
status_pembelian = 'Barang Telah Sampai Di Pembeli'");
?>
<!DOCTYPE html>
<html>
<head>
type="text/css">
<link

</head>
<body>
<h1>Laporan Pembelian</h1>
<p>Laporan Pembelian Per-tanggal <?php
date_default_timezone_set("Asia/Jakarta"); echo date('d-m-Y') , " Jam " ,
date('H:i:s'); ?></p>
<p>Admin : <?php echo $_SESSION['nama_lengkap']; ?></p>
<thead>
L-165
<tr>
<th>No</th>
<th>Pelanggan</th>
<th>Tanggal</th>
<th>Jumlah</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $total=0; $key=1; ?>
<?php
while($pecah = $ambil->fetch_assoc()){
?>
<?php $total+=$pecah['total_pembelian'] ?>
<tr>
<td><?php echo $key; ?></td>
<td><?php echo $pecah["nama_pelanggan"] ?></td>
<td><?php echo $pecah["tanggal_pembelian"] ?></td>
<td>Rp. <?php echo
number_format($pecah["total_pembelian"]) ?></td>
<td><?php echo $pecah["status_pembelian"] ?></td>
</tr>
<?php $key++; } ?>
</tbody>
<tfoot>
<tr>
<th colspan="3">Total</th>
<th>Rp. <?php echo number_format($total) ?></th>
<th></th>
</tr>
</tfoot>
L-166
</table>
</div>
window.print();
</script>
</body>
</html>
40. CONTROLLERS PRODUK (ADMIN)
<?php
session_start();
{
exit();
}
L-167
}
if ($logoutGoTo) {
session_destroy();
exit;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
shrink-to-fit=no">
L-168
type="text/css">
<link
.empty{
cursor: default;
}
</style>
</head>
<div id="wrapper">
href="index.php">
</a>
</li>
L-169
</li>
</li>
</li>
</li>
</li>
</li>
L-170
</li>
</li>
</li>
</div>
</ul>
<div id="content">
static-top shadow">
</button>
expanded="false">
L-171
</a>
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
4">
<h1 class="h3 mb-0 text-gray-800">Data Produk</h1>
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary
shadow-sm" data-toggle="modal" data-target="#admin"><i class="fas fa-
download fa-sm text-white-50"></i> Input Data Produk</a>
</div>
<div class="modal fade" id="admin" tabindex="-1" role="dialog"
L-172
<h5 class="modal-title" id="exampleModalLabel">Input Data
Produk</h5>
label="Close">
</button>
</div>
<div class="modal-body">
<?php
{
$datakategori[] = $tiap;
}
?>
<form action="tambah_produk.php" method="post"
enctype="multipart/form-data">
<select class="form-control" name="id_kategori">
<option value="">Pilih Kategori</option>
<?php foreach ($datakategori as $key => $value): ?>
<option value="<?php echo $value["id_kategori"] ?>"><?php echo

$value["nama_kategori"] ?></option>
<?php endforeach ?>
</select>
</div>
<label>Nama</label>
L-173
<input type="text" class="form-control" name="nama">
</div>
<label>Harga (Rp)</label>
<input type="number" class="form-control" name="harga">
</div>
<label>Stok</label>
<input type="number" class="form-control" name="stok">
</div>
<label>Deskripsi</label>
<textarea class="form-control" name="deskripsi"
rows="10"></textarea>
</div>
<label>Foto</label>
<input type="file" class="form-control" name="foto">
</div>
</div>
<button class="btn btn-primary"
name="save">Simpan</button>
</form>
</div>
</div>
</div>
</div>
L-174
<h6 class="m-0 font-weight-bold text-primary">Data Produk</h6>
</div>
cellspacing="0">
<thead>
<tr>
<th style="text-align:center;">No</th>
<th style="text-align:center;">Kategori</th>
<th style="text-align:center;">Nama Produk</th>
<th style="text-align:center;">Harga</th>
<th style="text-align:center;">Stok</th>
<th style="text-align:center;">Foto</th>
<th style="text-align:center;">Aksi</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
<?php $ambil=$koneksi->query("SELECT * FROM produk
LEFT JOIN kategori ON produk.id_kategori=kategori.id_kategori"); ?>
<?php while($pecah = $ambil->fetch_assoc()){ ?>
<tr>
<td style="text-align:center;"><?php echo $nomor; ?></td>
<td style="text-align:center;"><?php echo
$pecah['nama_kategori']; ?></td>
$pecah['nama_produk']; ?></td>
$pecah['harga_produk']; ?></td>
L-175
$pecah['stok_produk']; ?></td>
<td>
<img src="../foto_produk/<?php echo $pecah['foto_produk'];
?>" width="100">
</td>
<td>
<a href="hapus_produk.php?id=<?php echo
$pecah['id_produk']; ?>" class="btn-danger btn">Hapus</a>
<a href="edit_produk.php?id=<?php echo
$pecah['id_produk']; ?>" class="btn btn-warning">Ubah</a>
</td>
</tr>
<?php $nomor++; ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
L-176
label="Close">
</button>
</div>
?>">Logout</a>
</div>
</div>
</div>
</div>
</body>
</html>
41. CONTROLLERS TAMBAH GALERI (ADMIN)
<?php
if (isset($_POST['save']))
L-177
{
$nama = $_FILES['foto']['name'];
$lokasi =$_FILES['foto']['tmp_name'];
move_uploaded_file($lokasi, "../foto_produk/".$nama);
$koneksi->query("INSERT INTO produk(nama_produk, harga_produk,
foto_produk, deskripsi_produk, stok_produk, id_kategori)
VALUES('$_POST[nama]', '$_POST[harga]', '$nama',
'$_POST[deskripsi]','$_POST[stok]',$_POST[id_kategori])");
echo "<script>alert('Data produk Telah Diinput');</script>";
echo "<meta http-equiv='refresh' content='1;url=produk.php'>";
}
?>
42. CONTROLLERS TAMBAH PRODUK (ADMIN)
<?php
if (isset($_POST['save']))
{
$nama = $_FILES['foto']['name'];
$lokasi =$_FILES['foto']['tmp_name'];
move_uploaded_file($lokasi, "../foto_produk/".$nama);
$koneksi->query("INSERT INTO produk(nama_produk, harga_produk,
foto_produk, deskripsi_produk, stok_produk, id_kategori)
VALUES('$_POST[nama]', '$_POST[harga]', '$nama',
'$_POST[deskripsi]','$_POST[stok]',$_POST[id_kategori])");
echo "<script>alert('Data produk Telah Diinput');</script>";
echo "<meta http-equiv='refresh' content='1;url=produk.php'>";
}
?>
43. CONTROLLERS TESTIMONI (ADMIN)
<?php
L-178
session_start();
{
exit();
}
}
if ($logoutGoTo) {
session_destroy();
exit;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
L-179
shrink-to-fit=no">
type="text/css">
<link
.empty{
cursor: default;
}
</style>
</head>
<div id="wrapper">
href="index.php">
</a>
L-180
</li>
</li>
</li>
</li>
</li>
</li>
L-181
</li>
</li>
</li>
</li>
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<div id="content">
static-top shadow">
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-
circle mr-3">
L-182
</button>
expanded="false">
</a>
400"></i>
Logout
</a>
Profil
</a>
</div>
</li>
</ul>
</nav>
<h6 class="m-0 font-weight-bold text-primary">Testimoni</h6>
L-183
</div>
cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Email</th>
<th>Pesan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $nomor=1; ?>
testimoni"); ?>
<tr>
<td><?php echo $pecah['nama_testi']; ?></td>
<td><?php echo $pecah['email_testi']; ?></td>
<td><?php echo $pecah['pesan']; ?></td>
<td><a href="hapus_testi.php?id_testi=<?php echo
$pecah['id_testi']; ?>" class="btn btn-danger btn-user btn-
block">Hapus</a></td>
</tr>
<?php $nomor++ ?>
<?php } ?>
</tbody>
L-184
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</body>
</html>
L-185
LAMPIRAN 2 OUTPUT PROGRAM
Halaman Home User
Halaman Produk
L-186
Halaman Beli
L-187
Halaman Login
Halaman Daftar
L-188
Halaman Keranjang
L-189
Halaman Checkout
Halaman Riwayat Belanja
L-190
Halaman Lihat Pembayaran
Halaman Tentang Kami
L-191
Halaman Galeri
L-192
Halaman Login Admin
L-193
Halaman Dashboard
Halaman Tentang Kami
L-194
Halaman Tentang Pare
Halaman Gambar Pare
L-195
Halaman Kategori
Halaman Produk
L-196
L-197
Halaman Pembelian
Tampilan Halaman Detail
Tampilan Halaman Pembayaran
L-198
Halaman Laporan
Halaman Pelanggan
L-199
Halaman Testimoni
L-200

Suci May Iswandhari 16119170 Revisi

Diunggah oleh

Informasi Dokumen

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

Suci May Iswandhari 16119170 Revisi

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS GUNADARMA

FAKULTAS ILMU KOMPUTER & TEKNOLOGI INFORMASI

RANCANG BANGUN WEBSITE UMKM PENJUALAN

Nama : Suci May Iswandhari

Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai

Saya yang bertanda tangan di bawah ini,

Nama : Suci May Iswandhari

Judul Tulisan : Rancang Bangun Website UMKM Penjualan Produk

Olahan Pare Pada Toko Miaparetoz Menggunakan PHP

Tanggal Sidang : 29-07-2022

Tanggal Lulus : 29-07-2022

Bekasi, 15 Juni 2021