2. Perancangan struktur menu member
Tampilan Utama
member
Kategori Tentang
Home
Faq Saran
Keranjang User
Chino Kemeja
Tambah belanja
Checkout Konfirmasi
Status pemesanan
Data member
Logout
Gambar 4.11 Struktur Menu Member
3. Perancangan struktur menu admin
Halaman Utama Admin
dasboard manajemen
laporan logout
Lihat toko
Data member
produk kategori
Ongkos kirim
Laporan Pengadaan
Laporan penjualan
pengadaan produk
Data bank
Gambar 4.12 Struktur Menu Admin
4.2.2 Perancangan input
Perancangan input adalah perancangan bentuk tampilan untuk masukan data, yang digunakan sebagai antarmuka antara pengguna dengan sistem. Dalam
perancangan sistem yang diusulkan ini, telah dibuat beberapa perancangan input untuk setiap fungsinya diantaranya :
1. Form Login Member
Dibawah ini merupakan gambaran sketsa dari perancangan input untuk login member dimana nantinya pelanggan yang telah mendaftar dan menjadi member
dapat melakukan login member terlebih dahulu pada untuk melakukan proses pemesanan produk.
Login
MASUK
Belum Punya akun?
DAFTAR
Gambar 4.13 Rancangan Form Login Member
2. Form Pendaftaran Member
Rancangan input ini merupakan gambaran dari rancangan form input data pendaftaran member. Dimana website yang buat akan dilengkapi dengan
tampilan form seperti ini dengan tujuan untuk melayani pelanggan yang ingin melakukan pendaftaran untuk menjadi member.
BananaCase Store
Kategori tentang
FAQ cara belanja kontak
MasukDaftar
Pendaftaran Member BananaCase
Buat Username : Password Anda
Buat Password : Nama Lengkap :
Nama Lengkap Anda
Alamat : Alamat Lengkap Anda
Email : No.Kontak anda
Kontak : Kota :
kota domisili anda emailandaserver.com
Kode Pos : Kode pos anda
Captha :
E B b E y
Masukan Captha disini
KIRIM BATAL
Saya menyetujui segala syarat dan ketentuan yang Diberlakukan oleh bananacase store
Tentang Kami Manajemen Kami
Akun Bank Kami Ikuti Sosmed Kami
Username Anda
Gambar 4.14 Rancangan Form Pendaftaran Member
3. Form Konfirmasi
Perancangan input ini merupakan gambaran untuk perancangan input proses konfirmasi dimana perancangan input ini berupa form yang nantinya akan
digunakan member untuk melakukan konfirmasi pembayaran setelah melakukan proses pemesanan produk.
BananaCase Store
Kategori tentang
FAQ cara belanja kontak
user
Konfirmasi Pembayaran
No Pemesanan : Password Anda
Atas Nama : Email Anda :
Nama Lengkap Anda Kontak anda :
Catatan Total pembayaran :
Cukup Tuliskan Nominalnya Tanggal pebayaran :
Via Bank : Klik icon kalender
No Kontak Anda
Rekening Bank Anda :
Captha :
N k c O y
Masukan Captha disini
KIRIM BATAL
Tentang Kami Manajemen Kami
Akun Bank Kami Ikuti Sosmed Kami
keranjang
Nomor rekening anda Nama pada rekening
lengkap : Nama Pada Rekening Anda
Via Bank
Catatan : Nomor Pemesanan
Tgl Rp
Gambar 4.15 Rancangan Form Konfirmasi
4. Form Saran
Rancangan input ini merupakan gambaran rancangan input untuk form saran yang nantinya dibuat agar pelanggan dapat memberikan kritik dan saran kepada
bananacase melalui fasilitas ini.
Kritik Saran
Silahkan kirim kritik, saran, dan pertanyaan pada form berikut
BananaCase Store
Alamat : Jl. Catelya No.20 Dipati Ukur Kontak : 085722273885
Email : Bananacaseyahoo.com
KIRIM BATAL
BananaCase Store
Kategori Tentang
FAQ Cara Belanja Kontak
Masuk Daftar
Tentang Kami Manajemen Kami
Akun Bank Kami Ikuti Sosmed Kami
Gambar 4.16 Rancangan Form Kritik Saran
5. Form Login Administrator
Rancangan input ini rancangan form login admin yang nantinya akan dijadikan gambaran dalam pembuatan interface form login administrator pada website yang
dibuat ini. Form login administrator sendiri dibuat untuk bagian shopkeeper yang menjadi admin dari sistem dan melakukan pengolahan data pada sistem.
Sign In
Login Administrator
Silahkan isi username password anda dengan benar
BananaCase Admin Page
Lihat toko banana case
Gambar 4.17 Rancangan Form Login Admin
6. Form Tambah Produk
Rancangan input ini merupakan gambaran dari interface form tambah produk yang berada didalam menu admin dan dibuat untuk kebutuhan admin saat
melakukan penambahan produk.
BananaCase Admin Page
Tambah Produk BananaCase
Foto Produk : Nama Produk :
Kategori : Harga :
Berat : Deskripsi :
Simpan Batal
Browse...
Rp Kg
Dashboard Produk
Pemesanan Data Bank
2013 Bootsrap Responsive Admin Template- Modified by Bananacase Lihat Toko
Admin BananaCase
Gambar 4.18 Rancangan Form input produk
7. Form Tambah Kategori
Di dalam halaman Admin juga dilengkapi menu tambah kategori yang berisikan form penambahan kategori. Adapun rancangan tampilan dari form input katergori
adalah seperti ini
BananaCase Admin Page
Tambah Kategori BananaCase
Nama Kategori : Simpan
Batal
Dashboard Produk
Pemesanan Data Bank
2013 Bootsrap Responsive Admin Template- Modified by Bananacase Lihat Toko
Admin BananaCase
Gambar 4.19 Rancangan Form input kategori
8. Form Tambah Data Bank
Rancangan input ini adalah rancangan input penambahan data bank yang dibuat untuk bagian admin dimana nantinya shopkeeper yang bertidak sebagai
admin dapat menginputkan data bank kedalam sistem melalui form ini.
BananaCase Admin Page
Logo Bank :
Nama Pemilik Rekening : Nama Bank :
No Rekening :
Dashboard Produk
Pemesanan Data Bank
Simpan Batalkan
2013 Bootsrap Responsive Admin Template- Modified by Bananacase Browse...
Lihat Toko Admin BananaCase
Gambar 4.20 Rancangan Form input data bank
9. Form Pengadaan Produk
Form Pengadaan Produk disediakan apabila admin ingin memasukan data pengadaan produk. Data pegadaan produk ini berisikan data produk, ukuran,
jumlah dan tanggal pengadaan produk. Untuk data produk dan ukuran sendiri tampil secara otomatis berdasarkan data yang sebelumnya telah diiputkan pada
form input produk, sehingga admin tinggal memilih produk dan ukuran yang telah tersedia.
Produk
Jumlah Ukuran
Tanggal Pengadaan
Nama Produk Ukuran
Klik Icon Kalendar Disamping
Panel Admin Bananacase
Simpan Batal
Lihat Toko Admin Bananacase
Dashboard Manajemen Laporan
Gambar 4.21 Rancangan Form pengadaan produk
10. Form Tambah Data Ongkos Kirim
Form ini merupakan form yang dibuat untuk menginputkan data ongkos kirim apabila admin ingin menambahkan data ongkos kirim baru. Data ini terdiri dari
data nama kurir, data pelayanan, tujuan dan tarif.
Tambah Jasa Pengiriman Kurir
Tujuan Pelayanan
Tarif Kg
Jenis Pelayanan
Panel Admin Bananacase
Simpan Batal
Lihat Toko Admin Bananacase
Dashboard Manajemen Laporan
Gambar 4.22 Rancangan Form input data Ongkos Kirim
4.2.3.Perancangan Output
Perancangan output dimaksudkan untuk merancang bentuk tampilan output data yang digunakan sebagai antar muka user dengan sistem.
1. Halaman Utama
Rancangan tampilan halaman utama pada website bananacase dirancang semenarik mungkin dimana di halaman utama tersebut terdapat gambar banner dan
produk unggulan dari bananacase distro fashion store. Adapun tampilan rancangan output dari halaman utama pelanggan sebagai berikut :
Banana Case Store
Katalog Produk Konfirmasi Pembayaran
tentang Fak
Kontak Keranjang Belanja
BANNER IMAGE
PRODUK UNGGULAN
PHOTO PHOTO
PHOTO PHOTO
Nama produk
Deksripsi
Harga
Nama produk
Deksripsi
Harga
BELI BELI
Nama produk
Deksripsi
Harga
BELI
Nama produk
Deksripsi
Harga
BELI
Tentang Kami Manajemen Kami
Akun Bank Kami Ikuti Sosmed Kami
Gambar 4.23 Rancangan tampilan halaman utama untuk pelanggan
2. Halaman Produk
Rancangan output halaman produk berisikan daftar produk sesuai dengan kategori masing-masing untuk pelanggan. Berikut tampilan untuk halaman produk
pelanggan
BananaCase Store
Kategori Tetang
FAQ dan Cara belanja Kontak
Keranjang user
Photo Photo
Photo Photo
Nama produk
Deksripsi
Harga
BELI
Nama produk
Deksripsi
Harga
BELI
Nama produk
Deksripsi
Harga
BELI
Nama produk
Deksripsi
Harga
BELI
Tentang Kami Manajemen Kami
Akun Bank Kami Ikuti Sosmed Kami
Gambar 4.24 Rancangan tampilan halaman produk
3. Keranjang Belanja
Rancangan Output keranjang belanja merupakan rancangan tampilan daftra produk yang telah dipesan oleh pelanggan dimana didalam keranjang tersebut
pelanggan dapat melihat,mengubah dan menghapus daftar produk yang telah dipilih oleh pelanggan saat berbelanja.
Keranjang Belanja
Produk A Produk B
Produk C Produk D
Produk F Produk E
Check Out Lanjutkan Berbelanja
Tentang Kami Manajemen Kami
Akun Bank Kami Ikuti Sosmed Kami
Nama Barang Jumlah
Harga Aksi
Sub-Total : Ongkir :
Total :
BananaCase Store
Kategori Tentang
FAQ Cara Belanja Kontak
Keranjang admin
Gambar 4.25 Rancangan tampilan Keranjang Belanja
4. Halaman Tentang
Halaman tentang merupakan halaman yang menjelaskan tentang profil dari perusahaan bananacase yang terdapat pada halaman pelanggan . Adapun tampilan
dari halaman ini sebagai berikut :
Penjelasan Profil
LOGO Tentang BananaCase
Photo Kategori
Tentang FAQ Cara Belanja
Kontak Keranjang
Banana Case Store
User
Konfirmasi pembayaran Status Pemesanan
Log Out
Tentang Kami Manajemen kami
Akun Bank Kami Ikuti Sosmed Kami
Gambar 4.26 Rancangan Halaman tentang
5. Laporan Penjualan
Rancangan Output ini merupakan rancangan output dari laporan penjualan yang nantinya disediakan dihalaman admin. Laporan penjualan ini
berdasarkan priode bulan dan tahun sehingga memudahkan admin apabila ingin melakukan pengolahan data untuk membuat laporan penjualan.
LAPORAN PENJUALAN BANANACASE DISTRO
FASHION STORE
PERIODE : TANGGAL CETAK :
ID : NAMA : MUSA
TGL : 17-10-2014 PRODUK
SIZE JUMLAH
HARGA
ID : NAMA : NOKY
TGL : 17-10-2014 TOTAL :
TOTAL : PRODUK
SIZE JUMLAH
HARGA
sample.png sample.png
HORMAT KAMI
Gambar 4.27 Rancangan Laporan Penjualan
6. Laporan Persediaan Produk
Rancangan output ini merupakan rancangan output untuk laporan persediaan produk yang disediakan untuk admin dalam mengolah laporan
pesediaan produk. Laporan ini bisa dicetak langsung oleh admin sehingga memudahkan dalam menyelesaikan kegiatannya.
Priode : Tanggal Cetak :
No Nama Produk
LAPORAN STOCK PERBULAN BANANACASE DISTRO
FASHION STORE
Ukuran Stock
Hormat Kami
Gambar 4.28 Rancangan Laporan Persediaan
4.3 Perancangan arsitektur jaringan
Sistem informasi penjualan ini digunakan oleh beberapa pengguna dengan hak akses tersediri, sehingga untuk mengakses sistem informasi penjualan ini
diperlukan koneksi internet, koneksi internet ini sangatlah dbutuhkan karena sistem informasi ini sendiri merupakan sistem informasi berbasis website yang
diharuskan online dalam penggunaanya baik dari sisi admin maupun pelanggan. Dengan menggunakan bahasa pemrograman PHP dan MYSQL sebagai
databasenya maka sistem informasi ini sendiri akan terhubung ke sisi server.
Adapun gambaran arsitektur jaringannya adalah sebagai berikut :
ADMIN PELANGGAN
SERVER
INTERNET
Gambar 4.29 Rancangan Arsitektur Jaringan
4.4. Implementasi
Dalam proses implementasi sistem informasi penjualan berbasis web pada Bananacase Distro Fashion Store dibuat dengan menggunakan bahasa
pemrograman PHP. Implementasi ini sendiri bertujuan untuk mengetahui apakah perangkat lunak dapat berjalan dan memiliki kualitas sesuai dengan yang
diinginkan. selain itu sistem informasi yang dibangun ini diharapkan dapat dikembangkan untuk kedepannya nanti sesuai dengan kebutuhan.
4.4.1 Batasan Implementasi
Dalam implementasi sistem informasi penjualan berbasis web pada Bananacase distro fashion store ini, implementasi difokuskan hanya pada
beberapa proses saja agar tidak melebar terlalu jadi dari tujuan pembuatan sistem ini. Adapun proses-proses tersebut diantaranya :
1. Proses pembelian produk 2. Proses Konfirmasi pembayaran
3. Proses pengolahan data produk dan lainnya 4. Proses pembuatan laporan
4.4.2 Implementasi perangkat lunak
Dalam implementasi perangkat lunak yang digunakan pada pembuatan sistem informasi penjualan berbasis web yang diusulkan ini juga dijelaskan
spesifikasi perangkat lunak yang digunakan diantaranya sebagai berikut : 1. Sistem Operasi : Windows 7 Ultimate
2. Program : Wamp5 3. Database : MySQL
Kategori