BUKU PETUNJUK PENGGUNAAN ( USER MANUAL)

WEBSITE ONLINE SHOPPING

BOOTSTRAPS

Toko Sepatu BootStraps

Komplek Pertokoan sepatu Pasaar Bojonegoro
2022
 Website Online Shopping

1. PENDAHULUAN
1.1. Tujuan Pembuatan Dokumen
Dokumen user manual website online shopping ini dibuat untuk tujuan sebagai berikut:
1 Menggambarkan dan menjelaskan penggunaan website BootStraps untuk pengguna
2 Sebagai panduan penggunaan Wesite BootStraps ini.
1.2. Deskripsi umum sistem
1.2.1. Deskripsi Umum Website
Deskripsi umum pada website meliputi deskripsi umum sistem informasi yang
dikembangkan, fungsi utama dari sistem informasi ini akan diberikan kepada
pengguna.
1.2.2. Deskripsi Umum Kebutuhan Website
Deskripsi umum kebutuhan website yang akan diimplementasikan meliputi
semua informasi yang bersifat teknis yang menjadi acuan dalam pengembangan
website.
1.3. Deskripsi dokumen
Dokumen ini dibuat untuk memberikan panduan penggunaan website sistem informasi
penjualan online. Dokumen ini berisikan informasi sebagai berikut.
1. BAB I
Berisikan informasi yang merupakan bagian pendahuluan, yang meiliputi tujuan
pembuatan dokumen, deskripsi umum sistem serta deskripsi dokumen.
2. BAB II
Berisikan perangkat yang dibutuhkan untuk penggunaan website BOOTSTRAPS
meliputi perangkat lunak dan perangkat keras
3. BAB III
Berisikan user manual website BOOTSTRAPS

22
 Website Online Shopping

2. PERANGKAT YANG DIBUTUHKAN

2.1. Perangkat lunak yang digunakan adalah :
1. Windows sebagai Operating System.
2. Firefox/google chrome sebagai Tools penjelajah (Web Browser)
2.2. Perangkat Keras yang digunakan adalah :
1. Computer
2. Mouser sebagai peralatan antarmuka
3. Monitor sebagai peralatan antarmuka
4. keyboard sebagai peralatan antarmuka
2.3. penggunaan website
pengguna website yang akan menggunakan website adalah sebagai berikut :
1. memiliki pemahaman tentang antar muka computer
2. memiliki pemahaman proses bisnis website

3. MENU DAN CARA PENGGUNAAN

3.1. Struktur Menu
Adapun struktur menu pada aplikasi sistem informasi penjualan online
(BOOTSTRAPS). Toko Boosdtraps, Kab Bojonegoro adalah sebagai berikut:
1. Menu tampilan awal user
2. Menu tampilan awal customer
3. Menu dalam user
 Dashboard
 Kategori (barang)
 Barang
 Gambar barang
 Pesanan masuk
 Laporan
 Setting (alamat toko)
 User

22
 Website Online Shopping

4. Menu dalam customer

 Register akun (wajib)
 Keranjang
 Detail keranjang
 Check out
 View detail barang
 Tambah barang ke keranjang
3.2. Pengguna
Pada bagian ini akan dijelaskan mengenai menu-menu yang ada pada website dan tata
cara memasukkan data.
3.2.1. Cara membuka situs
Untuk memulai akses terhadap website admin BOOTSTRAPS ini :
1. Bukalah website melalui browser (firefox/Google Chrome) dengan alamat
localhost/bootstraps/auth/login_user
2. Kemudian masukkan username dan password
Username : admin
Password : admin
*Note : untuk login sifatnya yaitu wajib, jika tidak login maka tidak dapat menakses website untuk user tersebut

3. Kemudian tekan Enter pada tombol keyboard atau klik tombol Log In pada
browser
4. Maka akan muncul tampilan halaman depan website BOOTSTRAPS
Maka pada layar akan tampak menu Halaman Pembuka/Awal situs
BOOTSTRAPS seperti pada gambar dibawah ini. Dalam menu dashboard ini
terdapat short menu untuk kemenu yang lain, serta dapat mengetahui jumlah
dari barang maupun user yang berada pada menu tersebut

22
Website Online Shopping

Menu kategori. Dalam menu kategori terdapat nama kategori dari barang yang
berada di etalase, dalam kategori, user dapat menambahkan, mengganti nama
kategori serta menghapus kategori.

 Tambah kategori
Terdapat tombol + add dalam menu kategori yang berguna untuk menambah
kategori, untuk cara menggunakannya, dengan cara tekan tombol
kemudian akan muncul gambar seperti dibawah ini. Masukkan nama kategori
baru yang akan ditambahkan, setleah selesai klik tombol save. Maka kategori
akan bertambah.

 Edit Kategori
Edit kategori digunakan untuk user mengganti kategori lama menjadi
kategori baru. Cara penggunaan edit kategori dengan cara tekan tombol .
Tombol tersebut terletak pada table action,maka akan muncul seperti gambar
dibawah ini. Kemudian ubah kategori lama untuk digantikan dengan kategori
baru. Tekan tombol save ketika selesai atau tekan tombol close untuk
membatalkan mengganti kategori.

22
Website Online Shopping

 Delete Kategori
Delete kategori digunakan ketika kategori barang tersebut sudah tidak
diperlukan lagi. Untuk cara menggunakan tekan tombol pada tabel action.
Maka akan muncul seperti gambar dibawah ini. Akan diberikan
pemberitahuan untuk menghapus atau tidaknya data kategori. Ketika ingin
menghapus, tekan tombol delete, jika tidak ingin menghapus maka klik
close.

Menu barang. Dalam menu barang terdapat nama barang, kategori, harga,
gambar barang. Dalam menu barang user dapat menambahkan barang yang akan
dimasukkan ke dalam etalase, bisa edit barang serta hapus barang tersebut.

22
Website Online Shopping

 Tambah barang
Terdapat tombol + add dalam menu barang yang berguna untuk menambah
barang, untuk cara menggunakannya dengan cara tekan tombol
kemudian akan muncul gambar seperti dibawah ini. Masukkan nama barang
kemudian pilih salah satu kategori barang yang sudah ditambahkan di dalam
menu kategori. Masukkan harga barang dan masukkan berat barang tersebut.
Tambahkan deskripsi barang agar customer mengerti jenis barang tersebut.
Masukkan gambar barang untuk dimasukkan ke dalam etalase nantinya.

 Edit barang
Edit barang digunakan untuk user mengganti Barang lama menjadi Barang
baru. Cara penggunaan edit kategori dengan cara tekan tombol . Tombol
tersebut terletak pada tabel action,maka akan muncul seperti gambar dibawah
ini. Kemudian ubah barang yang di inginkan. Tekan tombol Simpan ketika
selesai, atau tekan tombol Kembali untuk membatalkan mengganti Barang.

22
Website Online Shopping

 Delete Barang
Delete Barang digunakan ketika barang tersebut sudah tidak diperlukan lagi.
Untuk cara menggunakan tekan tombol pada tabel action. Maka akan
muncul seperti gambar dibawah ini. Akan diberikan pemberitahuan untuk
menghapus atau tidaknya data Barang tersebut. Ketika ingin menghapus,
tekan tombol delete, jika tidak ingin menghapus maka klik close.

Menu Gambar Barang. Menu ini digunakan untuk menambahkan gambar

barang di dalam detail barang untuk customer nantinya, agar customer bisa
melihat detail dari sepatu tersebut. Di dalam menu gambar barang terdapat nama
barang, serta gambar awal yang di tambahkan di menu barang, dan juga jumlah
gambar yaitu total gambar yang di tambahkan dalam menu gambar barang
tersebut. Dalam menu ini terdapat tombol tambah gambar barang dan delete
gambar barang.

22
Website Online Shopping

 Tambah gambar barang

Cara penggunaan tambah gambar barang, tekan tombol add gambar maka
akan muncul gambar dibawah ini. Dalam menu ini terdapat keterangan
gambar, bisa di isi sama dengan nama barangnya. Untuk keterangan gambar
sifatnya wajib isi, ketika tidak isi maka gambar tidak bisa di tambahkan.
Kemudian pilih gambar yang di tambahkan dengan tekan choose file cari
gambar yang ingin ditambahkan, maka aka nada preview terlebih dahulu
gambar yang akan ditambahkan itu benar atau tidak. Ketika sudah sesuai
tekan tombol simpan

 Delete gambar
Cara penggunaan delete gambar dengan cara tekan tombol delete yang
terletak dibawah setiap gambar. Maka akan ada pemberitahuan gambar
tersebut ingin di hapus serta diberikan preview dari gambar yang akan
dihapus tersebut. Jika ingin menghapus mak tekan tombol delete.

22
Website Online Shopping

Menu Pesanan Masuk. Dalam menu ini user dapat melihat pesanan-pesanan
yang masuk dari customer. Terdapat alur dalam pesanan masuk yaitu, pesanan
masuk, dikemas, dikirim, selesai. Seperti gambar dibawah ini.

 Pesanan masuk, dalam pesanan masuk user dapat melihat barang yang telah
du check out oleh customer. Dalam pesanan masuk terdapat tabel seperti
nomor order dari customer, tanggal customer memesan barang, expedisi yang
customer pilih, serta total pembayaran dari pesanan tersebut. Terdapat
beberapa status dalam pesanan masuk yaitu :
1. Belum bayar : yaitu customer telah checkout barang namun customer
belum membayar barang yang telah di checkout tersebut
2. Sudah bayar : yaitu customer telah membayar barang yang telah di check
out
3. Menungu verifikasi : yaitu user wajib cek bukti pembayaran dengan cara
tekan tombol cek bukti pembayaran. Maka akan muncul bukti
pembayaran seperti gambar samping ini.

Ketika telah sesuai tekan tombol proses, maka pesanan akan berubah ke alur
selanjutnya yaitu dikemas

22
Website Online Shopping

 Dikemas. Dalam proses dikemas ini terdapat no.order customer, tanggal

order, exspedisi, total bayar customer tersebut.

User wajib mengirimkan pesanan dari customer tersebut ke exspedisi yang

telah customer pilih. Setelah mengirimkan maka akan mendapatkan resi. Resi
tersebut user masukkan dengan cara tekan tombol kirim. Maka akan muncul
seperti gambar dibawah ini. User memasukkan resi di dalam menu No. resi.
(pastikan no resi sesuai karena tidak bisa menggantinya) kemudian tekan
kirim jika sudah sesuai.
Didalam Dikemas terdapat satu status yaitu status dikemas, yaitu user
mengemas barang yang di pesan oleh customer.

Setelah tekan tombol kirim maka akan diberitahukan bahwa pesan, Pesanan
Berhasil Di Kirim. Dan lanjut ke proses selanjutnya dikirm.

22
Website Online Shopping

 Dikirim. Dalam proses dikirim, user memberitahukan bahwa barang telah

dikirm dan customer dapat melihat barang yang di pesan telah dikirim, dan
bisa mengeceknya di resi yang telah ditulis.

 Selesai. Dalam proses ini user dapat melihat bahwa pesanan tersebut telah
diterima oleh customer.

Menu Laporan. Dalam menu laporan, user dapat mengecek pendapatan yang
telah di peroleh dari hasil penjualan. Untuk pengecekan Laporan terdapat tiga
jenis yaitu, pengecekan laporan berdasarkan perhari, perbulan, dan pertahun.

22
Website Online Shopping

 Laporan Harian,

user dapat mengecek laporan yang diperoleh dalam tanggal bulan dan tahun
yang di inginkan. untuk cara penggunaan. Dalam tabel laporan atur tanggal,
bulan, serta tahunnya. Kemudian tekan tombol laporan. Maka laporan dalam
tanggal, bulan, dan tahun tersebut akan terlihat. User dapat mencetak laporan
tersebut untuk menjadikan dokumen fisik. Dengan cara tekan tombol print.

 Laporan bulanan,

Di dalam laporan bulanan, user dapat mengecek laporan pada bulan yang di
inginkan, dengan cara pilih bulan serta tahunnya, kemudian tekan tombol
laporan, maka laporan pada bulan tersebut akan muncul

22
Website Online Shopping

Laporan tahunan,

Dalam laporan tahunan ini, user dapat meilhat transaksi penjualan dalam satu
tahun. Untuk cara penggunaan laporan tahunan, user atur tahun yang ingin di
lihat kemudian tekan tombol laporan, maka laporan dalam satu tahun tersebut
terlihat. User juga dapat mencetak laporan tersebut menjadi dokumen fisik.
Dengan cara tekan tombol print

Setting, dalam menu setting ini user dapat mengatur alamat toko yang di
inginkan, cara penggunaannya dengan cara pilih provinsi, kemudian pilih kota,
atur nama toko yaitu Toko Sepatu BootStraps, Kemudian atur alamat toko,
setelah itu atur alamat lengkap toko. Setelah selesai tekan tombol simpan.

22
Website Online Shopping

User,

dalam menu ini, user dapat melihat pengurus dari website tersebut, user dapat
menambahkan user lainnya sebagai pengurus dari website tersebut, dalam menu
user, user dapat menambahkan user lainnya, edit user ketika ingin mengganti
username atau passwordnya. Terdapat tombol dalam menu user yaitu:
 Add, berguna untuk menambahkan user lainnya, user dapat memilih level
dari pengurus, yaitu sebagai admin atau sebagai pengguna. Cara penggunan
dengan cara tekan tombol add, maka akan muncul eperti gambar dibawah
ini. Ketika telah menambahkan

22
Website Online Shopping

 Edit, edit berguna untuk mengganti nama user, username, password. Cara
penggunaanya dengan cara tekan tombol . maka akan muncul seperti
gambar dibawah ini

 Delete, user dapat menghapus user lain jika diperlukan, dengan cara tekan
tombol . maka akan muncul sebuah pemberitahuan ingin menghapus atau
tidak user tersebut.

LOG OUT

22
 Website Online Shopping

3.3. Customer
Pada bagian ini akan dijelaskan mengenai menu-menu yang ada pada website dan tata
cara memasukkan data.
3.3.1. Cara membuka situs
Untuk memulai akses terhadap website customer BOOTSTRAPS ini :
1. Bukalah website melalui browser (firefox/Google Chrome) dengan alamat
localhost/bootstraps/
2. Maka akan muncul halaman utama dari website Toko Online BootStraps

Di dalam menu utama ini terdapat menu kategori yang terletak di samping
yang digunakan untuk melihat barang-barang yang terkelompokkan
berdasarkan kategori yang di inginkan. Cara penggunaan dengan cara tekan
menu kategori kemudian pilih kategori barang yang dicari. Maka akan
muncul barang yang customer cari yang telah dikelompokkan dalam satu
kategori.

22
Website Online Shopping

Login/register. Menu ini adalah menu yang wajib dilakukan oleh customer,
karena ketika customer tidak melakukan register maka customer tidak dapat
melakukan pembelian di toko BootStraps. Untuk cara penggunaan, tekan
menu login/register maka akan muncul menu seperti dibawah ini.

Isi semua form yang ada, setelah semua terisi tekan tombol register, jika
sudah ada account maka tekan tombol saya sudah punya akun. Maka akan
muncul seperti dibawah ini. Masukkan email dan password
Email dan password yang sudah ada.
Email : zumrotulrubaiyah04@gmail.com
Password : 1234

22
Website Online Shopping

Detail barang, detail barang berfungsi agar customer dapat melihat secara
terperinci dari produk yang terjual, cara penggunaan dari detail barang
dengan cara tekan tombol maka akan muncul gambar seperti dibawah
ini.

Tambah ke keranjang (add to cart), yaitu customer dapat menambahkan

barang yang di inginkan ke dalam keranjang. Untuk cara penggunaan tekan
tombol add to cart maka akan muncul sebuah notifikasi barang bertambah ke
keranjang dan barang masuk ke
dalam keranjang, customer dapat mengecek di dalam tombol keranjang di
pojok kanan atas
View cart,

view cart adalah sebuah menu yang berguna untuk mengecek barang yang
telah di masukkan ke dalam keranjang, untuk cara penggunaan dengan cara
tekan tombol maka terdapat menu view cart, kemudian tekan maka
akan muncul seperti gambar dibawah ini

22
Website Online Shopping

dalam view cart customer dapat update keranjang, menghapus barang dalam
keranjang serta melakukan check out
Hapus barang dalam keranjang, customer dapat menghapus barang dalam
kerjang, tombol ini berguna untuk customer menghapus barang yang tidak
diperlukan di dalam keranjang. Cara penggunaan dengan cara tekan tombol
delete pada tabel action maka barang tersebut akan terhapus.
 Update cart, dalam update cart customer dapat menambahkan jumlah
barang atau mengurangi barang dalam. Untuk cara penggunaan dengan
cara tekan angka dalam tabel Qty kemudian tekan tombol update cart
maka jumlah barang dalam keranjang akan terupdate menjadi terbaru.
 Clear cart, tombol ini berguna untuk menghapus semua barang dalam
keranjang, fungsi ini berbeda dengan delete barang, yaitu fungsi dari clear
cart adalah menghapus keseluruhan barang yang berada dalam keranjang
sedangkan delete barang berguna untuk menghapus sebagian barang
dalam keranjang. Untuk cara penggunaan tekan tombol clear cart maka
semua barang dalam keranjang akan terhapus.
 Check out, customer dapat check out barang dalam keranjang jika ingin
membeli barang tersebut, cara penggunaannya dengan cara tekan tombol
chaeck out, maka akan muncul form seperti gambar dibawah ini.

Customer wajib mengisi form untuk melakukan check out, jika sudah terisi
semua, customer dapat melanjutkan ke proses selanjutnya yaitu proses check
out. Dengan cara tekan tombol proses cek out.

22
Website Online Shopping

Setelah melakukan proses cek out customer dapat melakukan ke proses

selanjutnya. Terdapat berbagai alur setelah melakukan check out seperti
dibawah ini.

Pesanan, dalam pesanan customer dapat membayar pesanan yang telah di

check out dengan cara tekan tombol bayar, maka akan muncul form seperti
gambar dibawah ini.

Customer dapat membayar di nomor rekening yang tertera dalam tabel

rekening toko, kemudian customer mengisi semua form yang tertera serta
melampirkan bukti pembayaran. Ketika sudah melakukan pengisian form,
tekan tombol submit, maka bukti pembayaran masuk ke dalam user.
Customer dapat menunggu pesanan diverifikasi oleh toko dan merubah status
ke dikemas.

22
Website Online Shopping

Dikemas. Dalam proses ini customer dapat melihat pesanan telah

terverifikasi dan customer dapat menunggu pesanan di kemas oleh toko dan
menunggu pesanan dikirim.

Dikirim, dalam proses ini customer dapat melihat kode nomor resi barang
tersebut, customer dapat melacak pesanan melalui resi tersebut di dalam web
expedisi yang di pilih, dan customer dapat mengecek pesanan tersebut telah
dikirim oleh toko dan menunggu barang sampai. Ketika pesanan telah
sampai, customer dapat tekan tombol terima. Dan status berubah ke selesai.

Selesai, proses ini adalah proses terakhir, pesanan telah di terima customer,
dan customer dapat melihat history dari semua pesanan telah dilakukan.

LOG OUT. Menu ini terletak pada saat tekan profil customer. Tekan tombol
logout jika ingin log out akun dari toko.

22