Manual Book Dan Source Code Belanja Ikan Online

E-Commerce Belanja Ikan Online (BIO) Jawa Barat
Manual Book
2021
Prepared By
Aji Prasetyo
Mita Febianah
Shelly Janu Setyaning Tyas
Yoga Estu Nugraha
Universitas Pendidikan Indonesia

06 Januari 2021
Manual book 1.0

Daftar Isi
Daftar Isi ................................................................................................................................. 2

1. Pendahuluan ....................................................................................................................... 7
1.1 Tujuan Pembuatan Dokumen........................................................................................... 7
1.2 Deskripsi Umum Sistem ................................................................................................. 7
1.2.1 Deskripsi Umum Aplikasi ................................................................................ 7
1.2.2 Deskripsi Umum Aplikasi ................................................................................ 7
1.3 Deskripsi Dokumen ........................................................................................................ 8
2. Perangkat Yang Digunakkan............................................................................................ 8
2.1 Perangkat Lunak ............................................................................................................. 8
2.2 Perangkat Keras ............................................................................................................. 8
2.3 Pengguna Aplikasi.......................................................................................................... 8
2.4 Pengenalan Dan Latihan................................................................................................. 8
3. Menu Dan Cara Penggunaan............................................................................................ 9
3.1 Struktur Menu ................................................................................................................ 9
3.2 Pengguna (User) ............................................................................................................ 9
3.2.1 Cara Membuka Sistus .................................................................................... 9
3.2.2 Menu Login ................................................................................................. 11
3.2.3 Daftar Akun ................................................................................................. 12
3.2.4 Menu User Setelah Login............................................................................. 15
3.2.5 Menu Pilihan Daftar Toko .......................................................................... 16
3.2.6 Menu Daftar Ikan Pada Toko ...................................................................... 18
3.2.7 Menu Keranjang.......................................................................................... 18
3.2.8 Menu Pembayaran ...................................................................................... 21
3.2.9 Menu Concat Us ......................................................................................... 26
3.3 Admin Toko ................................................................................................................. 28
3.2.1 Menu Login ................................................................................................. 29
3.2.2 Menu Daftar Akun ...................................................................................... 29
3.2.3 Daftar Home Admin Toko ........................................................................... 31
3.2.4 Menu Data Barang ....................................................................................... 31
3.2.5 Menu Input Barang ..................................................................................... 34
3.2.6 Menu Data Pembelian ................................................................................. 38
3.2.7 Menu Edit Profil ......................................................................................... 40
3.4 Admin Utama ............................................................................................................... 42
2
3.4.1 Menu Login................................................................................................. 43
3.4.2 Menu Home ................................................................................................ 43
3.4.3 Daftar User .................................................................................................. 44
3.4.4 Menu Daftar Toko ....................................................................................... 44
3.4.5 Menu Daftarkan Toko ................................................................................. 48
3.4.6 Menu Saran Dan Masukkan ........................................................................ 51
4. Source Code....................................................................................................................... 51
4.1 Admin.jsp ..................................................................................................................... 51
4.2 Admin_Penjual.jsp ....................................................................................................... 59
4.3 User.jsp......................................................................................................................... 66
4.4 Toko.jsp ........................................................................................................................ 72
4.5 Daftar_Ikan.jsp ............................................................................................................. 80
3
Daftar Gambar
Gambar 3.2.1 Beranda Awal .............................................................................................. 10

Gambar 3.2.1.1 Menampilkan Pilihan Menu ..................................................................... 10
Gambar 3.2.2 Tampilan Menu Login ................................................................................. 11
Gambar 3.2.2.1 Tombol Loginn ......................................................................................... 11
Gambar 3.2.3 Halaman Daftar Akun ................................................................................. 12
Gambar 3.2.3.1 Tombol Daftar .......................................................................................... 12
Gambar 3.2.3.2 Tombol Back Untuk Kembali Ke Menu Login ........................................ 13
Gambar 3.2.3.3 Menu Login Setelah Melalakukan Pendaftaran ....................................... 13
Gambar 3.2.3.4 Tombol Login Untuk Masuk Sebagai User .............................................. 14
Gambar 3.2.4.5 Informasi Peringatan “Username Atau Password Yang Anda Masukkan
Salah” ................................................................................................................................. 14
Gambar 3.2.4.6 Tombol Untuk Ke Halaman Utama.......................................................... 15
Gambar 3.2.4 Tombol Daftar Toko Setelah Melalkukan Login ........................................ 15
Gambar 3.2.4.1 Halaman Daftar Toko ............................................................................... 16
Gambar 3.2.5 Tombol Cari Untuk mencari Toko-Toko Yang Tersedia ............................ 16
Gambar 3.2.5.1 Tombol Lokasi Untuk Mengetahui Keterangan Toko ............................. 17
Gambar 3.2.5.2 Tombol Lihat Toko Untuk Melihat Produk Pada Toko ........................... 17
Gambar 3.2.6 Tampilan Produk Pada Suatu Toko ............................................................. 18
Gambar 3.2.7 Tombol Tambah ke keranjang untuk pemesanan ........................................ 18
Gambar 3.2.7.1 Tampilan Produk Jika Tersedia Dan Tombol Submit .............................. 19
Gambar 3.2.7.2 Tampilan Produk Jika Habis .................................................................... 19
Gambar 3.2.7.3 Tombol Bayar Jika Ingin Membayar........................................................ 20
Gambar 3.2.7.4 Tombol Cancel Jika Ingin Membatalkan Pesanan ................................... 20
Gambar 3.2.7.5 Tombol Ya Atau Tidak Untuk Membatalkan Pesanan ............................ 21
Gambar 3.2.8 Tampilan Menu Pembayaran Dengan Berbagai Metode ............................ 21
Gambar 3.2.8.1 Tampilan Jika Memilih Metode Pembayaran Dengan Tunai ................... 22
Gambar 3.2.8.2 Tampilan Jika Memilih Metode Pembayaran Dengan Debit ................... 22
Gambar 3.2.8.3 Tampilan Jika Memilih Metode Pembayaran Dengan Gopay ................. 23
Gambar 3.2.8.4 Tampilan Jika Memilih Metode Pembayaran Dengan Ovo ..................... 23
Gambar 3.2.8.5 Tampilan Jika Memilih Metode Pembayaran Dengan Link Aja! ............ 24
Gambar 3.2.8.6 Tampilan Jika Memilih Metode Pembayaran Dengan Dana.................... 24
Gambar 3.2.8.7 Tombol Kembali Setelah Melakukan Pembayaran .................................. 25
Gambar 3.2.8.8 Tampilan Daftar Keranjang Jika Sudah Dibayar ..................................... 25
Gambar 3.2.8.9 Tampilan Daftar Keranjang Jika Belum Dibayar ..................................... 26
4
Gambar 3.2.9 Tampilan Menu Contact Us ........................................................................ 26
Gambar 3.2.9.1 Tombol Kirim Jika Sudah Memasukkan Saran Dan Masukkan .............. 27
Gambar 3.2.9.2 Tampilan Info Creator .............................................................................. 27
Gambar 3.2.9.3 Tombol Logout ......................................................................................... 28
Gambar 3.3.1 Tombol Daftar Untuk Admin Toko............................................................. 29
Gambar 3.3.2 Tombol Daftar Akun ................................................................................... 29
Gambar 3.3.2.1 Tombol back kemenu Login..................................................................... 30
Gambar 3.3.2.2 Tombol Login setelah mendaftar ............................................................. 30
Gambar 3.3.3 Tampilan Home Pada Admin Toko Setelah Login ..................................... 31
Gambar 3.3.4 Tombol Edit Pada Menu Data Barang ........................................................ 31
Gambar 3.3.4.1 Halaman Untuk Mengedit Data Barang ................................................... 32
Gambar 3.3.4.2 Tombol Edit Jika Sudah Mengedit Data Barang ...................................... 32
Gambar 3.3.4.3 Tombol Peringatan “OKE” Setelah Mengedit Data Barang .................... 33
Gambar 3.3.4.4 Tombol Hapus Pada Edit Barang ............................................................. 33
Gambar 3.3.4.5 Tombol Peringatan “Batal” Dan “Hapus” Konfirmasi Penghapus Data .. 34
Gambar 3.3.5 Menu Input Barang Pada Admin Toko ....................................................... 34
Gambar 3.3.5.1 Pilihan Tersedia Pada Stock Barang ........................................................ 35
Gambar 3.3.5.2 Pilihan Habis Pada Stock Barang ............................................................. 35
Gambar 3.3.5.3 Tombol Pilih File Untuk Memilih Foto Barang ....................................... 36
Gambar 3.3.5.4 Tombol Open Untuk Memlih Foto Barang .............................................. 36
Gambar 3.3.5.5 Tombol Masukkan Setelah Mengisi Seluruh Data ................................... 37
Gambar 3.3.5.6 Tombol Peringatan “OKE” Data Berhasil Ditambahkan! ........................ 37
Gambar 3.3.5.7 Tampilan Data Yang Sudah Ditambahkan Tadi....................................... 38
Gambar 3.3.6 Tampilan Menu Data Pembelian ................................................................. 38
Gambar 3.3.6.1 Tampilan Status Transaksi Yang Sudah Dibayar Dan Konfirmasi
Pembayaran ........................................................................................................................ 39
Gambar 3.3.6.2 Tampilan Status Jika Belum Dibayarkan Oleh Pembeli .......................... 39
Gambar 3.3.7 Tampilan Menu Edit Profil Admin Toko .................................................... 40
Gambar 3.3.7.1 Menu Pengaturan Dan Edit Profil ............................................................ 40
Gambar 3.3.7.2 Tombol Kirim Jika Yakin Data Sudah Dimasukkan Dengan Benar ........ 41
Gambar 3.3.7.3 Tombol Kembali Jika Tidak Jadi Untuk Mengedit Data ......................... 41
Gambar 3.3.7.4 Tombol Logout Untuk Keluar .................................................................. 42
Gambar 3.4.1 Menu Login Pada Admin ............................................................................ 43
Gambar 3.4.2 Tampilan Menu Home Pada Admin Setelah Login .................................... 43
Gambar 3.4.2.1 Tampilan Menu Data User ....................................................................... 44
Gambar 3.4.4 Menu Data Daftar Toko Pada Web ............................................................. 44
Gambar 3.4.4.1 Tombol Edit Pada Daftar Toko ................................................................ 45
5
Gambar 3.4.4.2 Tampilan Menu Edit Toko ....................................................................... 45
Gambar 3.4.4.3 Tombol Edit Jika Sudah Melakukan Edit Data ........................................ 45
Gambar 3.4.4.4 Informasi Peringatan “OKE” Data Berhasil Diubah ................................ 46
Gambar 3.4.4.5 Informasi Peringatan “HAPUS” Konfirmasi Penghapusan Data ............. 47
Gambar 3.4.4.6 Informasi Peringatan “BATAL” Konfirmasi Penghapusan Data............. 47
Gambar 3.4.5 Tampilan Daftar Akun Toko ....................................................................... 48
Gambar 3.4.5.1 Tombol Daftar Untuk Mendaftarkan Akun Toko .................................... 48
Gambar 3.4.5.2 Informasi Peringatan “OKE” Data Berhasil Ditambahkan ...................... 49
Gambar 3.4.5.3 Tampilan Data Toko Yang Sudah Ditmabahkan ..................................... 49
Gambar 3.4.5.4 Informasi Peringatan “HAPUS” Konfirmasi Penghapusan Data ............. 50
Gambar 3.4.5.5 Informasi Peringatan “BATAL” Konfirmasi Penghapusan Data............. 50
Gambar 3.4.6 Tampilan Saran Dan Masukkan Dari User.................................................. 51
6
1. PENDAHULAN
1.1 Tujuan Pembuatan Dokumen
Tujuan dibuat dokumen panduan penggunaan Aplikasi Penjualan Ikan Online ini
antara lain sebagai berikut :
1. Menggambarkan dan menjelasakan penggunaan aplikasi Penjualan Ikan
Online untuk Admin Utama, Admin Toko dan User (Pembeli)
2. Sebagai panduan instalasi, konfigurasi dan penggunaan aplikasi Belanja Ikan
Online ini.
Pihak – pihak yang berkepentingan dan berhak menggunakan dokumen ini yaitu :
1. Admin Utama
Admin Utama Belanja Online Ikan menggunakan dokumen ini sebagai
panduan untuk mereka bagaimana cara menggunakan dan melakukan
pemeliharaan untuk aplikasi Belanja Ikan Online
2. Admin Toko
Admin Toko Belanja Ikan Online menggunakan dokumen ini sebagai penjual
untuk mereka yang ingin berbelanja ikan secara online tanpa perlu mendatangi
tempatnya secara langsung.
3. User (Pembeli)
User atau pembeli menggunakan dokumen ini sebagai panduan penggunaan
aplikasi sebagaimana hak akses yang diberikan kepada user(pembeli)
1.2 Deskripsi Umum Sistem

1.2.1 Deskripsi Umum Aplikasi
Deskripsi umum aplikasi meliputi deskripsi umum Aplikasi Belanja Ikan
Online yang dikembangkan, fungsi utama Aplikasi Belanja Ikan Online akan
diberikan kepada pengguna dan admin toko yang meliputi pembagian kelompok
pengguna seperti penjual dan hak pembeli di aplikasi ini.
1.2.2 Deskripsi Umum Kebutuhan Aplikasi

Deskripsi umum kebutuhan aplikasi yang akan diimplementasikan meliputi
semua informasi yang bersifat teknis yang menjadi acuan dalam pengembangan
aplikasi.
7
1.3 Deskripsi Dokumen (Ikhitisar)
Dokumen ini dibuat untuk memberikan panduan penggunaan aplikasi Belanja Ikan
Online. Dokumen ini berisikan informasi sebagai berikut :
1. BAB I
Berisi informasi umum yang merupakan bagian pendahuluan, yang
meliputi tujuan pembuatan dokumen, deskripsi umum sistem
serta deskripsi dokumen.
2. BAB II
Berisi perangkat yang dibutuhkan untuk penggunaan aplikasi Belanja
Ikan Online meliputi perangkat lunak dan perangkat hardware
3. BAB III
Berisi user manual aplikasi Belanja Ikan Online baik user manual
yang diperuntukkan untuk Admin Utama, Admin Toko dan User
(Pengguna)
2. PERANGKAT YANG DIGUNAKAN

2.1 Perangkat Lunak
Perangkat lunak yang digunakan dalam pengujian adalah:
1. Windows sebagai Operating System
2. XAMPP sebagai penyambung ke server DBMS
3. PHPMyAdmin sebagai DBMS Server
4. Google Chrome sebagai Tools Penjelajah (Web Browser)
2.2 Perangkat Keras

Perangkat keras yang digunakkan dalam pengujian ini adalah:
1. Komputer dengan spesifikasi AMD Ryzen 7 2700U with Radeon Vega
Mobile Gfx (8 CPus), ~2.2.Ghz RAM 8Gb
2. Mouse sebagai peralatan antarmuka
3. Monitor sebagai peralatan antarmuka
4. Keyboard sebagai peralatan antarmuka
2.3 Pengguna Aplikasi

Pengguna aplikasi yang akan menggunakan aplikasi ini terutama dari sisi Admin
Toko dan User(Pembeli) adalah sebagai berikut:
1. Memiliki pemahaman tentang antar muka komputer
2. Memiliki pemahaman proses bisnis di situs Web Belanja Ikan Online
3. Memiliki pemahaman menginput barang-barang untuk mengisi laman di daftar
ikan untuk Admin Toko
4. Memahami bagaimana cara memesan ikan di situs Web Belanja Ikan Online
2.4 Pengenalan Dan Latihan

Sumber daya manusia yang terlibat dalam oprasional pernggunaan aplikasi ini sehari-
hari terlebih dahulu diberikan pengenalan dan pelathan yang cukup aplikasi Belanja Ikan
Online ini.
8
3. MENU DAN CARA PENGGUNAAN
3.1 Struktur Menu
Adapun struktur menu pada Aplikasi Belanja Ikan Online ini adalah sebagai berikut:
1. Menu Dashbord
2. Menu Utama
 Home
 Login
 Daftar Ikan
 Contact Us
 Logout
3. Menu Register User
4. Menu User(Pembeli)
 Home
 Login
 Daftar Toko
 Contact Us
 Daftar Keranjang
 Logout
5. Menu Register Admin Toko
6. Menu Admin Toko
 Home
 Login
 Data Barang
 Input Barang
 Data Pembelian
 Edit Profil
 Logout
7. Menu Admin Utama
 Home
 Login
 Daftar Pembeli
 Daftar Toko
 Daftarkan Toko
 Saran dan Masukkan
 Logout
3.2 PENGGUNA (USER)

Pada bagian ini akan ditampilkan menu utama yang hanya akan bisa dilihat daftar
ikan saja tanpa bisa melihat daftar toko yang ada. Jika belum memiliki akun maka daftarlah
terlebih dahulu agar bisa menjadi member atau user.
3.2.1 CARA MEMBUKA SITUS

Untuk memualai aplikasi Belanja Online Ikan ini:
1. Bukalah aplikasi Belanja Ikan Online ini melalui web browser

2. Nyalakan XAMPP nyalakan Apache,My SQL dan Tomcat
3. Impor SQL”belanja_ikan_online” ke php MyAdmin
9
(IE atau Google Chorme atau yang lainya) dengan alamat url sebagai berikut:
http://localhost:8080/penjualan_ikan
4. Kemudian tekan Enter pada tombol keyboard

5. Akan muncul tampilan halaman depan aplikasi Belanja Ikan Online
Maka pada layer akan tampak menu Halaman Utama Situs Belanja Ikan Online
Gambar 3.2.1 Beranda Awal
Dimana jika ingin masuk ke menu login, arahkan cursor dan klik tombol LOGIN
Gambar 3.2.1.1 Menampilkan Pilihan Menu
10
3.2.2 MENU LOGIN
Kemudian akan diarahkan pada menu Login: Masukkan Username dan Password jika
sudah mendaftar apabila belum mendaftar
Gambar 3.2.2 Tampilan Menu Login
Silahkan klik tombol DAFTAR DISINI sebagai USER seperti pada pojok
kanan bawah setelah bacaan LOGIN
Gambar 3.2.2.1 Tombol Login
11
3.2.3 DAFTAR AKUN
Ketika sudah mengklik maka akan muncul tampilan seperti ini
Gambar 3.2.3 Halaman Daftar Akun
Isi data – data diatas dan pilih sebagai user. Jika sudah mendaftarkan diri lalu
klik DAFTAR. Pendaftaran sukses username dan password telah masuk ke
database dan masuk ke halaman admin utama
Gambar 3.2.3.1 Tombol Daftar
12
Lakukanlah login kembali dengan menekan tombol back pada kiri atas
Gambar 3.2.3.2 Tombol Back Untuk Kembali Ke Menu Login
Jika sudah maka akan dimunculkan kembali pada menu login kembali
Gambar 3.2.3.3 Menu Login Setelah Melalakukan Pendaftaran
13
Isilah username dan password dengan benar yang telah didaftarkan kembali,
Gambar 3.2.3.4 Tombol Login Untuk Masuk Sebagai User
Jika anda memasukkan username dan password yang salah maka akan muncul
tampilan seperti ini.
Gambar 3.2.4.5 Informasi Peringatan “Username Atau Password Yang Anda Masukkan
Salah”
14
Lalu untuk kembali ke menu LOGIN silahkan klik tombol KEMBALI KE
HALAMAN UTAMA. dikiri atas yang dilingkari seperti pada gambar dibawah ini
Gambar 3.2.4.6 Tombol Untuk Ke Halaman Utama
3.2.4 MENU USER KETIKA SETELAH MELAKUKAN LOGIN
Gambar 3.2.4 Tombol Daftar Toko Setelah Melalkukan Login
15
Jika telah memasukkan Username dan Password dengan benar maka akan
muncul halaman selamat datang seperti yang ditunjukan pada gambar dibawah ini
dan sudah bisa melihat DAFTAR TOKO tentunya.
Gambar 3.2.4.1 Halaman Daftar Toko
3.2.5 MENU DAFTAR TOKO KETIKA USER TELAH MELAKUKAN LOGIN
Jika ingin melihat daftar toko maka klik DAFTAR TOKO tersebut. Maka akan
menampilkan lokasi – lokasi toko ikan air tawar yang ada di Jawa Barat.Jika ingin
mencari kota yang anda tuju masukkanlah daerah toko yang anda inginkan. Lalu anda
klik cari pada kanan bawah yang ditunjuk
Gambar 3.2.5 Tombol Cari Untuk mencari Toko-Toko Yang Tersedia
16
Klik Tombol Biru pada map akan menunjukkan lokasi toko yang anda
inginkan seperti pada gambar dibawah ini.
Gambar 3.2.5.1 Tombol Lokasi Untuk Mengetahui Keterangan Toko
Jika ingin melihat salah satu toko yang ada pada daftar tersebut silahkan klik
tombol LIHAT TOKO menggunakan mouse.
Gambar 3.2.5.2 Tombol Lihat Toko Untuk Melihat Produk Pada Toko
17
3.2.6 MENU DAFTAR IKAN PADA TOKO
Jika sudah maka akan muncul daftar – daftar ikan yang telah anda klik tadi.
Misalkan disini melihat toko LOBSTER AIR TAWAR CIMAHI.
Gambar 3.2.6 Tampilan Produk Pada Suatu Toko
3.2.7 MENU DAFTAR KERANJANG
Jika ingin memesan klik TAMBAH KE KERANJANG lalu klik menggunakan

mouse.
Gambar 3.2.7 Tombol Tambah ke keranjang untuk pemesanan
18
Masukkan jumlah pesanan anda yang ingin anda pesan. Dan perhatikan pula
untuk stock barang jika stock barang TERSEDIA maka anda dapat menambahkannya.
Jika sudah maka akan memunculkan pesan seperti dibawah ini. Masukkan jumlah
barang yang ingin anda beli dibagian yang diberi tanda merah lalu klik SUBMIT
Gambar 3.2.7.1 Tampilan Produk Jika Tersedia Dan Tombol Submit

Jika pada pilihan anda stock barang menandakan HABIS maka anda tidak bisa
menambahkanya ke DAFTAR KERANJANG. Seperti pada gambar dibawah ini
Gambar 3.2.7.2 Tampilan Produk Jika Habis
19
Lalu Periksa ke halaman DAFTAR KERANJANG, maka akan muncul data
atau ikan yang anda pesan dan akan menunjukan nominal yang akan anda bayar
nantinya. Klik BAYAR jika ingin membayar
Gambar 3.2.7.3 Tombol Bayar Jika Ingin Membayar
Jika tidak jadi memesan bisa mengklik CANCEL.
Gambar 3.2.7.4 Tombol Cancel Jika Ingin Membatalkan Pesanan
20
Maka akan muncul tampilan seperti gambar dibawah ini klik Tombol YA
unutk membatalkan pesanan dan tekan BATAL jika tidak ingin membatalkan
Gambar 3.2.7.5 Tombol Ya Atau Tidak Untuk Membatalkan Pesanan
3.2.8 MENU PEMBAYARAN

Setelah melihat DAFTAR KERANJANG maka klik BAYAR pada pojok
kanan. Setelah kita tau nominal yang harus kita bayarkan maka kita akan diarahkan ke
METODE PEMBAYARN. Ada beberapa metode pambayaran yaitu ada Tunai, Debit,
Gopay, OVO, Link Aja! Dan Dana.
Gambar 3.2.8 Tampilan Menu Pembayaran Dengan Berbagai Metode
21
Jika anda memilih metode pembayaran TUNAI maka akan muncul gambar
seperti dibawah ini yaitu berisikan alamat toko yang akan anda bayarkan karena anda
ingin membayarnya secara tunai atau kata lain tanpa menggunakan pembayaran uang
virtual
Gambar 3.2.8.1 Tampilan Jika Memilih Metode Pembayaran Dengan Tunai
Jika anda memilih metode pembayaran DEBIT akan muncul pemberitahuan

seperti ini “Mohon maaf untuk metode pembayaran ini belum tersedia” yang
dimunculkan seperti gambar dibawah ini
Gambar 3.2.8.2 Tampilan Jika Memilih Metode Pembayaran Dengan Debit
22
Jika anda memilih metode pembayaran GOPAY maka akan muncul silahkan
bayar dengan nominal yang tertera ke nomer yang tertera lalu konfirmasi ke nomer
tertera. Yang akan dimunculkan seperti gambar dibawah ini
Gambar 3.2.8.3 Tampilan Jika Memilih Metode Pembayaran Dengan Gopay
Jika anda memilih metode pembayaran OVO maka akan muncul silahkan
Gambar 3.2.8.4 Tampilan Jika Memilih Metode Pembayaran Dengan Ovo
23
Jika anda memilih metode pembayaran Link Aja! maka akan muncul silahkan
Gambar 3.2.8.5 Tampilan Jika Memilih Metode Pembayaran Dengan Link Aja!
Jika anda memilih metode pembayaran Dana maka akan muncul silahkan
Gambar 3.2.8.6 Tampilan Jika Memilih Metode Pembayaran Dengan Dana
24
Jika sudah klik tombol KEMBALI.
Gambar 3.2.8.7 Tombol Kembali Setelah Melakukan Pembayaran
Jika anda telah melakukan transaksi pembayaran dan telah

mengkonfirmasikan ke Admin Toko yang dituju maka stastus pembayaran berubah
menjadi SUDAH DIBAYAR.
Gambar 3.2.8.8 Tampilan Daftar Keranjang Jika Sudah Dibayar
25
Jika belum dibayar dan belum melakukan konfirmasi pembayaran ke Admin
Toko yang dituju maka tidak akan muncul status pembayarannya
Gambar 3.2.8.9 Tampilan Daftar Keranjang Jika Belum Dibayar
3.2.9 MENU CONTACT US

Pada menu kali ini user diperbolehkan memberikan saran dan masukkan
tentang pelayanan pada Web Belanja Ikan Online ini. Yang harus diisi oleh user jika
ingin menambhkan saran maka harus mengisi Email, Nama dan Saran atau
Masukkan. Yang akan dimunculkan seperti gambar dibawah ini
Gambar 3.2.9 Tampilan Menu Contact Us
26
Jika sudah klik tombol KIRIM seperti yang ditunjukkan pada gambar dibawah ini
Gambar 3.2.9.1 Tombol Kirim Jika Sudah Memasukkan Saran Dan Masukkan
Lalu dalam halaman Contact Us ini juga user dapat mengetahui Alamat dan No
telphon creator web tersebut. Yang dimunculkan seperti pada gambar dibawah ini.
Gambar 3.2.9.2 Tampilan Info Creator
27
Untuk menutup akun atau sudah tidak melakukan aktifitas apapun pada web
ini anda bisa mengeluarkanya dengan mengklik LOGOUT pada kanan atas yang
ditunjukkan pada gambar.
Gambar 3.2.9.3 Tombol Logout

3.3 ADMIN TOKO
ikan saja. Jika belum memiliki akun maka daftarlah terlebih dahulu agar bisa menjadi Admin
Toko. Untuk mendaftarkan sebagai admin toko ada 2 cara yaitu melalkukan pendaftaran
sediri melalu halaman DAFTAR sebagai ADMIN TOKO atau bisa mendaftarkan melalui
admin utama.
28
3.3.1 MENU LOGIN
Sama halnya dengan user (pembeli) menu tampilan login, jika admin toko
belum memilki akun silahkan ke klik DAFTAR AKUN sebagai ADMIN TOKO
dipojok kanan bawah seperti gambar dibawah ini
Gambar 3.3.1 Tombol Daftar Untuk Admin Toko

3.3.2 MENU DAFTAR AKUN
Isilah data-data yang harus diisi dengan benar setelah mendaftarkan
akun anda klik tombol DAFTAR di bawah.
Gambar 3.3.2 Tombol Daftar Akun
29
Lalu klik back pada pojok kiri atas atau bisa memilih menu LOGIN.
Gambar 3.3.2.1 Tombol back kemenu Login
Masukkan username dan password yang telah anda daftarkan tadi lalu klik
tombol LOGIN
Gambar 3.3.2.2 Tombol Login setelah mendaftar
30
3.3.3 MENU HOME PADA ADMN TOKO
Pada menu home admin toko ini kita akan dilihatkan data data seperti jumlah
pegunjung, jumlah transaksi dan keuntungan hari ini lalu daftar barang yang telah
terjual. Seperti ditunjukkan pada gambar dibawah ini
Gambar 3.3.3 Tampilan Home Pada Admin Toko Setelah Login
3.3.4 MENU DATA BARANG PADA ADMIN TOKO

Pada menu data barang ini kita akan dilihatkan data – data barang yang
kita masukkan atau kita jual di halaman daftar ikan di toko kita. Dan disini
juga kita bisa mengedit barang dengan mengklik tombol EDIT.
Gambar 3.3.4 Tombol Edit Pada Menu Data Barang
31
Maka akan muncul tampilan untuk mengedit barang
Gambar 3.3.4.1 Halaman Untuk Mengedit Data Barang
Setelah beres mengedit silahkan tekan tombol EDIT
Gambar 3.3.4.2 Tombol Edit Jika Sudah Mengedit Data Barang
32
Maka akan muncul tampilan seperti ini dan itu menandakan edit
barang berhasil ditambahkan. lalu tekan tombol OKE
Gambar 3.3.4.3 Tombol Peringatan “OKE” Setelah Mengedit Data Barang
Jika ingin menghapus barang tersebut maka klik tombol HAPUS, seperti pada
gambar dibawah ini
Gambar 3.3.4.4 Tombol Hapus Pada Edit Barang
33
Maka akan muncul tampilan seperti ini. Jika anda mengklik tombol HAPUS
maka data barang akan terhapus sebaliknya jika anda mengklik tombol BATAL maka
data barang tidak akan terhapus.
Gambar 3.3.4.5 Tombol Peringatan “Batal” Dan “Hapus” Konfirmasi Penghapus Data
3.3.5 MENU INPUT BARANG PADA ADMIN TOKO

Pada menu input barang ini kita harus mengisi Nama Barang, Harga Barang,
Stok Barang, Deskripisi Barang dan Pilih file gambar. Seperti gambar dibawah ini
Gambar 3.3.5 Menu Input Barang Pada Admin Toko
34
Untuk mengisi stok barang hanya ada dua pilihan yaitu TERSEDIA dan
HABIS, lalu pilih diatara dua pilihan tersebut.
Gambar 3.3.5.1 Pilihan Tersedia Pada Stock Barang
Gambar 3.3.5.2 Pilihan Habis Pada Stock Barang
35
Untuk memilih file gambar untuk gambar ikan klik PILIH FILE lalu
masukkan gambar yang ingin kita masukkan dengan format .jpg; .png atau yang
lainya setelah itu klik OPEN seperti gambar dibawah ini
Gambar 3.3.5.3 Tombol Pilih File Untuk Memilih Foto Barang
Gambar 3.3.5.4 Tombol Open Untuk Memlih Foto Barang
36
Setelah mengsi data yang telah kita masukkan tadi lalu klik MASUKKAN.
Seperti gambar dibawah ini.
Gambar 3.3.5.5 Tombol Masukkan Setelah Mengisi Seluruh Data
Setelah menakan tombol MASUKKAN maka akan muncul tampilan seperti

ini lalu tekan OKE
Gambar 3.3.5.6 Tombol Peringatan “OKE” Data Berhasil Ditambahkan!
37
Gambar 3.3.5.7 Tampilan Data Yang Sudah Ditambahkan Tadi
3.3.6 MENU DATA PEMBELIAN PADA ADMIN TOKO

Pada menu ini kita dapat tahu bahwa ada data-data pembeli yang telah
membeli di toko kita. Data – data yang akan dimunculkan yaitu Nama User, Nama
Barang, Jumlah Beli, Status Pembayaran, Total
Gambar 3.3.6 Tampilan Menu Data Pembelian
38
Jika User telah melakukan konfirmasi pembayaran ke Admin Toko maka klik
tombol KONFIRMASI PEMBAYARAN maka akan berubah status menjadi SUDAH
DIBAYAR
Gambar 3.3.6.1 Tampilan Status Transaksi Yang Sudah Dibayar Dan Konfirmasi
Pembayaran
jika user belum mengkonfirmasi pembayaranya maka statusnya masih

BELUM DIBAYAR
Gambar 3.3.6.2 Tampilan Status Jika Belum Dibayarkan Oleh Pembeli

39
3.3.7 MENU EDIT PROFIL PADA ADMIN TOKO
Pada meu ini jika admin toko ingin mengubah username dan password agar
mudah diingat maka akan mengisi username dan password yang baru. Seperti pada
gambar dibawah ini
Gambar 3.3.7 Tampilan Menu Edit Profil Admin Toko
Jika ingin mengedit profil admin toko silahkan klik tombol PENGATURAN
dipojok kanan atas lalu pilih EDIT PROFIL
Gambar 3.3.7.1 Menu Pengaturan Dan Edit Profil
40
Jika anda telah beres mengedit data silahkan tekan tombol KIRIM
Gambar 3.3.7.2 Tombol Kirim Jika Yakin Data Sudah Dimasukkan Dengan Benar
Jika tidak jadi maka tekan tombol KEMBALI
Gambar 3.3.7.3 Tombol Kembali Jika Tidak Jadi Untuk Mengedit Data
41
Untuk menutup akun silahkan klik Tombol PENGATURAN pilih menu
LOGOUT seperti gambar dibawah ini
Gambar 3.3.7.4 Tombol Logout Untuk Keluar
3.4 ADMIN UTAMA

ikan saja tanpa bisa melihat daftar toko yang ada. Admin utama disini berfungsi mengecek
webnya jika ada permasalahan pada fitur-fitur di webnya atau melihat data toko dan data user
42
3.4.1 MENU LOGIN PADA ADMIN UTAMA
Pada menu login tampilannya akan sama seperti pada user dan admin toko
yang ditunjukkan pada gambar dibawah ini. Untuk admin utama disini sudah memilki
akun untuk login jadi tidak perlu mendaftarkan kembali. Untuk username: admin dan
password: admin lalu klik tombol LOGIN
Gambar 3.4.1 Menu Login Pada Admin
3.4.2 MENU HOME ADMIN UTAMA

Pada menu ini kita ditampilkan menu Daftar Pembeli, Daftar Toko dan Saran
dari user. yang ditunjukkan pada gambar dibawah ini
Gambar 3.4.2 Tampilan Menu Home Pada Admin Setelah Login
43
3.4.3 MENU DAFTAR PEMBELI PADA ADMIN UTAMA
Pada menu ini menampilkan nama-nama user (pembeli) yang telah
mendaftarkan melalui Daftar Akun sebagai User. data yang ditampilkan berupa
Username, Password, Nama User, Alamat dan No. Telephon. Seperti pada gambar
dibawah ini.
Gambar 3.4.2.1 Tampilan Menu Data User
3.4.4 MENU DAFTAR TOKO PADA ADMIN UTAMA

Pada menu ini menampilkan daftar toko yang telah terdaftar pada web
Gambar 3.4.4 Menu Data Daftar Toko Pada Web
44
Jika ingin mengedit data toko tersebut silahkan klik tombol EDIT
Gambar 3.4.4.1 Tombol Edit Pada Daftar Toko
Maka akan muncul tampilan edit toko seperti gambar dibawah ini
Gambar 3.4.4.2 Tampilan Menu Edit Toko
45
Jika sudah mengedit atau memasukkan data yang sesuai silahkan klik EDIT
Gambar 3.4.4.3 Tombol Edit Jika Sudah Melakukan Edit Data
Setelah itu akan muncul tampilan seperti ini lalu klik tombol OKE
Gambar 3.4.4.4 Informasi Peringatan “OKE” Data Berhasil Diubah
46
Jika ingin menghapus data toko tersebut silahkan klik HAPUS
Gambar 3.4.4.5 Informasi Peringatan “HAPUS” Konfirmasi Penghapusan Data

Jika tidak jadi silahkan klik tombol BATAL
Gambar 3.4.4.6 Informasi Peringatan “BATAL” Konfirmasi Penghapusan Data
47
3.4.5 MENU DAFTARKAN TOKO PADA ADMIN UTAMA
Pada menu ini Admin Utama bisa mendaftarkan Admin Toko jika ingin
mendaftarkan toko anda melalui admin utama maka hubungi melalui nomer telephone
: 081221095671 dan email : belanjaikanonline@gmail.com.Pada menu daftarkan toko
ini terdiri dari Username, Password, Nama Toko, Alamat, Nomor Telephon dan
Koordinat. Seperti pada gambar dibawah ini
Gambar 3.4.5 Tampilan Daftar Akun Toko

Setelah mengisi data-data seperti gambar diatas klik tombol DAFTAR
Gambar 3.4.5.1 Tombol Daftar Untuk Mendaftarkan Akun Toko
48
Maka akan muncul tampilan seperti gambar dibawah ini lalu tekan tombol OKE
Gambar 3.4.5.2 Informasi Peringatan “OKE” Data Berhasil Ditambahkan
Cek data tadi yang sudah didaftarkan di halaman DAFTAR TOKO
Gambar 3.4.5.3 Tampilan Data Toko Yang Sudah Ditmabahkan
49
Jika ingin menghapus silahkan tekan tombol HAPUS maka akan muncul tampilan
seperti ini
Gambar 3.4.5.4 Informasi Peringatan “HAPUS” Konfirmasi Penghapusan Data
Jika tidak jadi menghapus data tok tersebut silahkan klik tombol BATAL
Gambar 3.4.5.5 Informasi Peringatan “BATAL” Konfirmasi Penghapusan Data
50
3.4.6 MENU SARAN DARI USER UNTUK ADMIN UTAMA
Pada menu ini Admin Utama dapat melihat saran dan masukkan yang
diberikan oleh user mengenai fitur-fitur yang ada pada web Belanja Ikan Online ini
yang ditunjukkan seperti pada gambar dibawah ini.
Gambar 3.4.6 Tampilan Saran Dan Masukkan Dari User
4. Source Code
4.1 Admin.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<%
Connection conn;
Statement stmt;
PreparedStatement pst;
ResultSet rs;
String sql;
Class.forName("com.mysql.jdbc.Driver");
51
conn =
DriverManager.getConnection("jdbc:mysql://localhost/belanja_ikan_online?useTimezone=tr
ue&serverTimezone=UTC", "root", "");
%>
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="all,follow">

<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" href="css/fontastic.css">

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">

<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">

<link rel="stylesheet" href="css/custom.css">

<link rel="shortcut icon" href="img/favicon.ico">

<header class="header">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-holder d-flex align-items-center justify-content-between">

<div class="navbar-header">
<a href="admin.jsp" class="navbar-brand d-none d-sm-
inline-block">
<div class="brand-text d-none d-lg-inline-block"><span>Dashboard
Admin</span></div></a>
<a id="toggle-btn" href="#" class="menu-btn
active"><span></span><span></span><span></span></a>
</div>

<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">

<li class="nav-item"><a href="logout.jsp" class="nav-link logout"> <span
class="d-none d-sm-inline">Logout</span><i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="page-content d-flex align-items-stretch">

53
<nav class="side-navbar">

<div class="sidebar-header d-flex align-items-center">
<div class="avatar"><img src="img/avatar-1.jpg" alt="..." class="img-fluid rounded-
circle"></div>
<div class="title">
<h1 class="h4">Admin</h1>
<p>Administrator</p>
</div>
</div>
<span class="heading">Main</span>
<ul class="list-unstyled">
<li class="active"><a href="admin.jsp"> <i class="icon-home"></i> Home </a></li>
<li><a href="user.jsp"> <i class="icon-grid"></i> Daftar Pembeli</a></li>
<li><a href="toko.jsp"> <i class="fa fa-bar-chart"></i> Daftar Toko </a></li>
<li><a href="daftar.jsp"> <i class="icon-padnote"></i> Daftarkan Toko </a></li>
<li><a href="saran.jsp"> <i class="icon-padnote"></i> Saran & Masukan </a></li>
</ul>
</nav>
<div class="content-inner">
<section class="tables">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header d-flex align-items-center">
<h3 class="h4">Daftar Toko</h3>
</div>
<div class="card-body">
<div class="table-responsive">
54
<table class="table table-striped table-hover">
<thead>
<tr>
<th>No.</th>
<th>Username</th>
<th>Password</th>
<th>Nama Toko</th>
</tr>
</thead>
<tbody>
<%
sql = "SELECT * FROM toko";
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
while(rs.next()){
%>
<tr>
<td><%=rs.getString("id_toko") %></td>
<td><%=rs.getString("username") %></td>
<td><%=rs.getString("password") %></td>
<td><%=rs.getString("nama_toko") %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
55
</div>
</div>
</div>
<div class="card">
<h3 class="h4">Daftar User</h3>
</div>
<thead>
<tr>
<th>No.</th>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<%
sql = "SELECT * FROM pembeli";
while(rs.next()){
%>
<tr>
<td><%=rs.getString("id_pembeli") %></td>
56
</tr>
<%
}
%>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<h3 class="h4">Saran User</h3>
</div>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<%
57
sql = "SELECT * FROM saran";
while(rs.next()){
%>
<tr>
<td><%=rs.getString("nama") %></td>
<td><%=rs.getString("email") %></td>
<td><%=rs.getString("masukan") %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<footer class="main-footer">
<div class="row">
<div class="col-sm-6">
58
<p>Your company © 2020</p>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/charts-custom.js"></script>

<script src="js/front.js"></script>
</body>
</html>
4.2 Admin_Penjual.jsp
<%
String[] data = (String [])session.getAttribute("toko");
if(data != null){
59
}else{
response.sendRedirect("login.jsp");
}
%>
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Admin Penjual</title>

60
>
</head>
<body>
<div class="page">

<a href="admin_penjual.jsp" class="navbar-brand d-none d-
sm-inline-block">
Penjual</span></div></a>
</div>
<li class="nav-item dropdown"><a rel="nofollow" data-target="#" href="#" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link language
dropdown-toggle"><span class="d-none d-sm-inline-block">Pengaturan</span></a>
<ul aria-labelledby="languages" class="dropdown-menu">
<li><a rel="nofollow" href="edit_toko.jsp" class="dropdown-item" style="font-
weight: bold;">Edit Profil<i class="fa fa-user" style="align-content: center; margin-left:
150px;"></i></a></li>
<li><a rel="nofollow" href="logout.jsp" class="dropdown-item" style="font-
weight: bold;">Logout<i class="fa fa-sign-out" style="align-content: center; margin-left:
165px;"></i></a></li>
</ul>
</li>
61

</ul>
</div>
</div>
</nav>
</header>
<div class="avatar"><img src="../images/Logo/<%=data[3] %>" alt="..." class="img-
fluid rounded-circle"></div>
<div class="title">
<h1 class='h4'><%=data[1] %></h1>
<p><%=data[2] %></p>
</div>
</div>
<li class="active"> <a href="admin_penjual.jsp"> <i class="icon-home"></i> Home
</a></li>
<li><a href="barang.jsp"> <i class="icon-grid"></i> Data Barang </a></li>
<li><a href="input_barang.jsp"> <i class="fa fa-bar-chart"></i> Input Barang
</a></li>
<li ><a href="transaksi.jsp"> <i class="icon-padnote"></i> Data Pembelian </a></li>
</ul>
</nav>
62

<section class="dashboard-counts no-padding-bottom">
<div class="row bg-white has-shadow">

<div class="col-xl-3 col-sm-6">
<div class="item d-flex align-items-center">
<div class="icon bg-violet"><i class="icon-user"></i></div>
<div class="title"><span>Jumlah<br>Pengunjung</span>
<div class="progress">
<div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-violet"></div>
</div>
</div>
<div class="number"><strong>25</strong></div>
</div>
</div>

<div class="icon bg-red"><i class="icon-padnote"></i></div>
<div class="title"><span>Jumlah<br>Transaksi</span>
aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"></div>
</div>
</div>
<div class="number"><strong>70</strong></div>
</div>
</div>
63

<div class="icon bg-green"><i class="icon-bill"></i></div>
<div class="title"><span>Keuntungan Hari Ini</span>
aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-green"></div>
</div>
</div>
<div class="number"><strong>Rp 100000</strong></div>
</div>
</div>
</div>
</div>
</section>
<div class="row">
<div class="card">
<h3 class="h4">Daftar Barang</h3>
</div>
<thead>
64
<tr>
<th>No.</th>
<th>Nama Barang</th>
<th>Harga Barang</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<div class="row">
</div>
</div>
</div>
</footer>
</div>
</div>
65
</div>

</body>
</html>
4.3 User.jsp
<%
Connection conn;
Statement stmt;
ResultSet rs;
String sql;
conn =
66
%>
<!DOCTYPE html>
<html>
<head>

67
>
</head>
<body>
<div class="page">


inline-block">


</div>


</ul>
</div>
</div>
</nav>
68
</header>

circle"></div>
<div class="title">
</div>
</div>
<li><a href="admin.jsp"> <i class="icon-home"></i> Home </a></li>
<li class="active"><a href="user.jsp"> <i class="icon-grid"></i> Daftar

Pembeli</a></li>
<li><a href="toko.jsp"> <i class="fa fa-bar-chart"></i> Daftar Toko </a></li>
</ul>
</nav>
<div class="row">
69
<div class="card">
<h3 class="h4">Daftar User</h3>
</div>
<thead>
<tr>
<th>No.</th>
<th>Username</th>
<th>Password</th>
<th>Nama</th>
<th>Alamat</th>
<th>No. Telepon</th>
</tr>
</thead>
<tbody>
<%
sql = "SELECT * FROM pembeli";
int a = 1;
while(rs.next()){
String id = rs.getString("id_pembeli");
70
%>
<tr>
<td><%=a%></td>
<td><%=rs.getString("nama") %></td>
<td><%=rs.getString("alamat") %></td>
<td><%=rs.getString("no_telp") %></td>
</tr>
<%
a++;
%>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<div class="row">
71
</div>
</div>
</div>
</footer>
</div>
</div>
</div>

</body>
</html>
4.4 Toko.jsp
<%
72
Connection conn;
Statement stmt;
ResultSet rs;
String sql;
conn =
%>
<!DOCTYPE html>
<html>
<head>
73

>
</head>
<body>
<div class="page">


inline-block">


</div>
74


</ul>
</div>
</div>
</nav>
</header>

circle"></div>
<div class="title">
</div>
</div>
<li><a href="admin.jsp"> <i class="icon-home"></i> Home </a></li>
<li><a href="user.jsp"> <i class="icon-grid"></i> Daftar Pembeli</a></li>
<li class="active"><a href="toko.jsp"> <i class="fa fa-bar-chart"></i> Daftar Toko

</a></li>
75
</ul>
</nav>
<div class="row">
<div class="card">
<h3 class="h4">Daftar Toko</h3>
</div>
<thead>
<tr>
<th>No.</th>
<th>Username</th>
<th>Password</th>
<th>Nama Toko</th>
<th>Alamat</th>
<th>No. Telepon</th>
<th>Aksi</th>
</tr>
</thead>
76
<tbody>
<%
sql = "SELECT * FROM toko";
int a = 1;
while(rs.next()){
String id = rs.getString("id_toko");
%>
<tr>
<td><%=a%></td>
<td><%=rs.getString("nama_toko") %></td>
<td><%=rs.getString("alamat") %></td>
<td><%=rs.getString("no_telp") %></td>
<td>
<a href="edit_penjual.jsp?id=<%=id%>" class="btn btn-sm btn-

primary">Edit</a>
<button type="button" data-toggle="modal" data-target="#myModal-

<%=id%>" class="btn btn-sm btn-danger" >Hapus</button>
<div id="myModal-<%=id%>" tabindex="-1" role="dialog" aria-

labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
77
<div class="modal-header">
<h4 id="exampleModalLabel" class="modal-title">Konfirmasi

Penghapusan Data</h4>
</div>
<div class="modal-body">
<p>Apakah Anda Yakin Ingin Menghapus Toko

<%=rs.getString("nama_toko") %> ?</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-

secondary">Batal</button>
<a href="delete_penjual.jsp?id=<%=id%>" class="btn btn-sm btn-

danger">Hapus</a>
</div>
</div>
</div>
</div>
</td>
</tr>
<%
a++;
%>
</tbody>
</table>
</div>
</div>
78
</div>
</div>
</div>
</div>
</section>

<div class="row">
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
79

</body>
</html>
4.5 Daftar_Ikan.jsp
<%
String[] data = (String [])session.getAttribute("pembeli");
if(data != null){
}else{
response.sendRedirect("../admin/login.jsp");
String toko = request.getParameter("id");
Connection conn;
Statement stmt;
PreparedStatement pst, pst2, pst3, pst4;
ResultSet rs, rst;
String sql;
conn =
80
pst = conn.prepareStatement("SELECT * FROM toko where id_toko = ?");
pst.setString(1, toko);
rst = pst.executeQuery();
if(request.getParameter("submit")!=null){
int harga = Integer.parseInt(request.getParameter("harga"));
int banyak = Integer.parseInt(request.getParameter("jumbel"));
int total = (banyak*harga);
String id_produk = request.getParameter("idbrng");
String banyak2 = String.valueOf(banyak);
String total_harga = String.valueOf(total);
pst3 = conn.prepareStatement("INSERT INTO transaksi (id_produk, id_pembeli, banyak,

total_harga, status) VALUES (?, ?, ?, ?, ?)");
pst3.setString(1, id_produk);
pst3.setString(2, data[0]);
pst3.setString(3, banyak2);
pst3.setString(4, total_harga);
pst3.setString(5, "Belum Dibayar");
pst3.executeUpdate();
%>
<!DOCTYPE html>
<html lang="zxx">
81
<head>
<title>Belanja Ikan Online</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<meta name="keywords" content="Beverages Responsive web template, Bootstrap Web

Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
Ericsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
</script>

<link href="../css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/style.css" type="text/css" rel="stylesheet" media="all">

<link type="text/css" rel="stylesheet" href="../css/cm-overlay.css" />

<script src="../js/jquery-2.2.3.min.js"></script>
<script src="../js/bootstrap.js"></script>

<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/sweetalert2.min.css" rel="stylesheet">
82

<link rel="shortcut icon" href="../admin/img/icon.ico">

<link href="//fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link
href="//fonts.googleapis.com/css?family=Mukta+Mahee:200,300,400,500,600,700,800"
rel="stylesheet">

</head>
<body>

<div class="w3_agilits_banner_bootm">

<div class="container">
<div class="w3_agile_logo">
<h1>
<a href="indexu.jsp">
<img src="images/logo.png" alt="" />Belanja Ikan Online</a>
</h1>
</div>
<div class="agileits_w3layouts_nav">
<div id="toggle_m_nav">
<div id="m_nav_menu" class="m_nav">
<div class="m_nav_ham w3_agileits_ham" id="m_ham_1"></div>
<div class="m_nav_ham" id="m_ham_2"></div>
<div class="m_nav_ham" id="m_ham_3"></div>
</div>
83
</div>
<div id="m_nav_container" class="m_nav wthree_bg">
<nav class="menu menu--sebastian">
<ul id="m_nav_list" class="m_nav menu__list">
<li class="m_nav_item menu__item" id="m_nav_item_1">
<a href="indexu.jsp" class="menu__link"> Home </a>
</li>
<li class="m_nav_item menu__item menu__item--current"

id="moble_nav_item_2">
<a href="galleryu.jsp" class="menu__link"> Daftar Toko </a>
</li>
<li class="m_nav_item menu__item" id="moble_nav_item_3">
<a href="contactu.jsp" class="menu__link"> Contact </a>
</li>
<a href="keranjang.jsp" class="menu__link"> Daftar Keranjang </a>
</li>
<a href="logoutu.jsp" class="menu__link"> Logout </a>
</li>
</ul>
</nav>
</div>
</div>
</div>

<div class="w3_agilits_inner_bottom">
84
<div class="wthree_agile_login">
<ul>
<li>
<i class="fa fa-phone" aria-hidden="true"></i>(+62)81221095671</li>
<li>
<i class="fa fa-envelope-o list-icon" aria-hidden="true"></i>
<a href="mailto:info@example.com">belanjaikanonline@gmail.com</a>
</li>
</ul>
</div>
</div>
</div>
<div class="inner-bg"></div>

<%
while(rst.next()){
%>

<div class="section-w3ls agileits-gallery text-center" id="portfolio">
<h3 class="w3ls-title">
Daftar Produk Toko <%=rst.getString("nama_toko") %></h3>
<div class="gallery-w3layouts">
<%
85
pst2 = conn.prepareStatement("SELECT * FROM produk WHERE id_toko =
?");
pst2.setString(1, toko);
rs = pst2.executeQuery();
while(rs.next()){
%>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo" style="margin-left: 5px; margin-right: 5px;">
<%
out.println("<a class='cm-overlay' href='../images/PRODUK

TOKO/"+rst.getString("username")+"/"+rs.getString("gambar")+"'>");
out.println("<figure class='imghvr-shutter-in-out-diag-2'>");
out.println("<img src='../images/PRODUK
TOKO/"+rst.getString("username")+"/"+rs.getString("gambar")+"' alt=' ' class='img-
responsive' style='height: 190px; width: 100%;' />");
out.println("</figure>");
out.println("</a>");
%>
</div>
<div class="agile-gallery-info" style="margin-left: 5px; margin-right: 5px;

margin-bottom: 5px;">
<h5><%=rs.getString("jenis") %></h5>
<p>Rp.<%=rs.getString("harga") %></p>
<br>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal"

data-target="#popup-<%=rs.getString("id_produk") %>">TAMBAH KE
KERANJANG</button>
</div>
86
<div class="modal fade" id="popup-<%=rs.getString("id_produk") %>"
tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content text-center">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-

hidden="true">×</button>
<div class="col-md-9 col-sm-9 col-xs-9 sub-head">
<h4 style="font-family: Georgia, 'Times New Roman', Times, serif;

font-size: x-large; padding-top: 15px;"><%=rs.getString("jenis") %></h4>
<p style="font-family: Georgia, 'Times New Roman', Times,

serif;"><%=rs.getString("deskripsi") %></p>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 sub-img">
<img src="../images/PRODUK
TOKO/<%=rst.getString("username") %>/<%=rs.getString("gambar") %>" alt=""
class="img-responsive" />
</div>
<div class="clearfix"></div>
</div>
<div class="modal-body">
<div class="row">
<div style="text-align: left; font-weight: bolder;">
<h6 style="font-size: medium; margin-bottom: 10px; margin-left:

20px; font-family: Georgia, 'Times New Roman', Times, serif;">Harga :
Rp.<%=rs.getString("harga") %></h6>
<%
if(rs.getString("stok").equals("Tersedia")){
%>
87
<h6 style="font-size: medium; margin-bottom: 10px;
margin-left: 20px; color: green; font-family: Georgia, 'Times New Roman', Times,
serif;">Stok : <%=rs.getString("stok") %></h6>
<form action="" method="POST">
<input type="number" class="form-control"

placeholder="Jumlah Beli" name="jumbel" />
<input type="hidden" class="form-control"

name="idbrng" value="<%=rs.getString("id_produk") %>" />

name="harga" value="<%=rs.getString("harga") %>" />

name="stok" value="<%=rs.getString("stok") %>" />
</div>
<button type="submit" class="btn btn-primary btn-sm"

name="submit">Submit</button>
</div>
</form>
<% }else{ %>
<h6 style="font-size: medium; margin-bottom: 10px;

margin-left: 20px; color: red; font-family: Georgia, 'Times New Roman', Times, serif;">Stok
: <%=rs.getString("stok") %></h6>
<form action="" method="POST">
<input type="number" class="form-control"

placeholder="Jumlah Beli" name="jumbel" disabled />

name="idbrng" value="<%=rs.getString("id_produk") %>" />

name="harga" value="<%=rs.getString("harga") %>" />
88
name="stok" value="<%=rs.getString("stok") %>" />
</div>
<button type="button" class="btn btn-primary btn-sm"

disabled>Submit</button>
</div>
</form>
<%
%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%
%>
</div>
</div>
</div>
<div class="section-w3ls agileits-gallery text-center">
89
<a href="galleryu.jsp" class="btn btn-primary">Kembali Ke Halaman Toko</a>
</div>
</div>
<div class="panel-sec section-w3ls">
<h3 class="agileits-title"><%=rst.getString("nama_toko") %></h3>

<div class="w3l-about timing" style="margin-left: 500px;">
<div>
<div class="col-sm-7 col-sm-12 agile_timing_right">
<h4>Hubungi & Kunjungi</h4>
<ul>
<li>
<%=rst.getString("alamat") %></li>
<li>
<%=rst.getString("no_telp") %></li>
</ul>
</div>
<%
out.println("<div class='col-md-5 menu-bg' style='background:

url(../images/Logo/"+rst.getString("logo")+") no-repeat center;'></div>");
%>
<div class="clearfix"> </div>
</div>
</div>
</div>

90
</div>
<% }
%>


<div class="agile-footer w3ls-section">
<div class="agileits_w3layouts-copyright">
<p>© 2020 Belanja-Ikan-Online. All Rights Reserved | By Aji Prasetyo</a>
</p>
</div>
</div>
</div>


<script src="../js/sweetalert2.min.js"></script>
<script>
function beli(){
Swal.fire({
title: "Data Berhasil Ditambah Ke Keranjang!",
text: "Silahkan Cek Pada Halaman Keranjang",
icon: "success",
button: "Selesai"
});
</script>
91
<script src="../js/jquery.tools.min.js"></script>
<script src="../js/jquery.mobile.custom.min.js"></script>
<script src="../js/jquery.cm-overlay.js"></script>
<script>
$(document).ready(function () {
$('.cm-overlay').cmOverlay();
});
</script>


<script src="../js/move-top.js"></script>
<script src="../js/easing.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.scroll').click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
</script>


<script>
$(document).ready(function () {
92
/*
var defaults = {
containerID: "toTop", // fading element id
containerHoverID: "toTopHover", // fading element hover id
scrollSpeed: 1200,
easingType: "linear"
};
*/
$().UItoTop({
easingType: 'easeOutQuart'
});
});
</script>
<script src="../js/SmoothScroll.min.js"></script>


<script src="../js/main.js"></script>

</body>
</html>
93

Manual Book Dan Source Code Belanja Ikan Online

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

Manual Book Dan Source Code Belanja Ikan Online

Diunggah oleh

Hak Cipta:

Format Tersedia

E-Commerce Belanja Ikan Online (BIO) Jawa Barat

Universitas Pendidikan Indonesia

Manual book 1.0

Daftar Isi ................................................................................................................................. 2

Gambar 3.2.1 Beranda Awal .............................................................................................. 10

1.2 Deskripsi Umum Sistem

1.2.2 Deskripsi Umum Kebutuhan Aplikasi

2. PERANGKAT YANG DIGUNAKAN

2.2 Perangkat Keras

2.3 Pengguna Aplikasi

2.4 Pengenalan Dan Latihan

3.2 PENGGUNA (USER)

3.2.1 CARA MEMBUKA SITUS

1. Bukalah aplikasi Belanja Ikan Online ini melalui web browser

4. Kemudian tekan Enter pada tombol keyboard

Gambar 3.2.1 Beranda Awal

Gambar 3.2.1.1 Menampilkan Pilihan Menu

Gambar 3.2.2 Tampilan Menu Login

Gambar 3.2.2.1 Tombol Login

Ketika sudah mengklik maka akan muncul tampilan seperti ini

Gambar 3.2.3 Halaman Daftar Akun

Gambar 3.2.3.1 Tombol Daftar

Gambar 3.2.3.2 Tombol Back Untuk Kembali Ke Menu Login

Gambar 3.2.3.3 Menu Login Setelah Melalakukan Pendaftaran

Gambar 3.2.3.4 Tombol Login Untuk Masuk Sebagai User

Gambar 3.2.4.6 Tombol Untuk Ke Halaman Utama

3.2.4 MENU USER KETIKA SETELAH MELAKUKAN LOGIN

Gambar 3.2.4 Tombol Daftar Toko Setelah Melalkukan Login

Gambar 3.2.4.1 Halaman Daftar Toko

3.2.5 MENU DAFTAR TOKO KETIKA USER TELAH MELAKUKAN LOGIN

Gambar 3.2.5 Tombol Cari Untuk mencari Toko-Toko Yang Tersedia

Gambar 3.2.5.1 Tombol Lokasi Untuk Mengetahui Keterangan Toko

Gambar 3.2.6 Tampilan Produk Pada Suatu Toko

3.2.7 MENU DAFTAR KERANJANG

Jika ingin memesan klik TAMBAH KE KERANJANG lalu klik menggunakan

Gambar 3.2.7 Tombol Tambah ke keranjang untuk pemesanan

Gambar 3.2.7.1 Tampilan Produk Jika Tersedia Dan Tombol Submit

Gambar 3.2.7.2 Tampilan Produk Jika Habis

Gambar 3.2.7.3 Tombol Bayar Jika Ingin Membayar

Jika tidak jadi memesan bisa mengklik CANCEL.

Gambar 3.2.7.4 Tombol Cancel Jika Ingin Membatalkan Pesanan

Gambar 3.2.7.5 Tombol Ya Atau Tidak Untuk Membatalkan Pesanan

3.2.8 MENU PEMBAYARAN

Gambar 3.2.8 Tampilan Menu Pembayaran Dengan Berbagai Metode

Gambar 3.2.8.1 Tampilan Jika Memilih Metode Pembayaran Dengan Tunai

Jika anda memilih metode pembayaran DEBIT akan muncul pemberitahuan

Gambar 3.2.8.2 Tampilan Jika Memilih Metode Pembayaran Dengan Debit

Gambar 3.2.8.3 Tampilan Jika Memilih Metode Pembayaran Dengan Gopay

Gambar 3.2.8.4 Tampilan Jika Memilih Metode Pembayaran Dengan Ovo

Gambar 3.2.8.6 Tampilan Jika Memilih Metode Pembayaran Dengan Dana

Gambar 3.2.8.7 Tombol Kembali Setelah Melakukan Pembayaran

Jika anda telah melakukan transaksi pembayaran dan telah

Gambar 3.2.8.8 Tampilan Daftar Keranjang Jika Sudah Dibayar

Gambar 3.2.8.9 Tampilan Daftar Keranjang Jika Belum Dibayar

3.2.9 MENU CONTACT US

Gambar 3.2.9 Tampilan Menu Contact Us

Gambar 3.2.9.2 Tampilan Info Creator

Gambar 3.2.9.3 Tombol Logout

Gambar 3.3.1 Tombol Daftar Untuk Admin Toko

Gambar 3.3.2 Tombol Daftar Akun

Gambar 3.3.2.1 Tombol back kemenu Login

Gambar 3.3.2.2 Tombol Login setelah mendaftar

Gambar 3.3.3 Tampilan Home Pada Admin Toko Setelah Login

3.3.4 MENU DATA BARANG PADA ADMIN TOKO