Implementasi Antar Muka Implementasi

..Gambar 4.30 Tampilan Halaman utama pelanggan

2. Tampilan Halaman Pendaftaran Member

Halaman Pendaftaran Member merupakan halaman yang disediakan untuk melayani pengunjung yang ingin menjadi member bananacase, hal itu dikarenakan dalam proses pemesanan produk, para pelanggan harus menjadi member terlebih dahulu, sehingga dapat melakukan pemesanan produk sesuai dengan yang dinginkan. Oleh karena itulah tampilan antarmuka form pendaftaran member wajib dibuat untuk melayani peroses tersebut. Gambar 4.31 Tampilan Form Pedaftaran Member

3. Tampilan Form Login member

Tampilan ini merupakan tampilan antarmuka yang disediakan kepada pelanggan yang sudah menjadi member dari Bananacase untuk melakukan proses login member. agar dapat melakukan proses lebih lanjut maka pelanggan yang telah menjadi member diwajibkan mengisi data username dan password mereka didalam form ini sesuai dengan data yang telah didaftarkan sebelumnya jika ingin melakukan pemesanan produk . Gambar 4.32 Tampilan Form Login Member

4. Tampilan Halaman Kriktik Dan Saran

Website ini juga dilengkapi halaman kritik dan saran yang bertujuan untuk menampung seluruh pendapat, keluhan ataupun segala aspirasi para pelanggan sehingga pihak bananacase mendapatkan masukan-masukan dari para pelanggan tersebut untuk meningkatkan kegiatan usaha mereka kedepannya nanti. dan berikut ini merupakan gambar tampilan antarmuka form kritik dan saran pelanggan. Gambar 4.33 Tampilan Form Saran Pengunjung 5. Tampilan Halaman Produk Tampilan ini adalah tampilan dimana produk yang tersedia dapat dilihat pada halaman ini, tampilan produk sendiri dibagi per kategori produk, nantinya pelanggan yang telah menjadi member dapat memlih produk yang tersedia melalui tombol “beli” dan pelanggan akan diarahkan ke tampilan detail produk, sedangkan untuk pelanggan yang belum menjadi member, tombol beli akan bersifat disable Sehingga tidak dapat melakukan proses pembelian sebelum pelanggan tersebut menjadi member. Gambar 4.34 Tampilan Halaman Produk

6. Tampilan Detail Produk

Tampilan ini merupakan tampilan kelanjutan dari proses pemesanan produk, dimana ketika pelanggan yang telah menjadi member mengklik tombol “beli” maka pelanggan akan diarahkan ke tampilan detail produk ini. Tampilan dari halaman detail produk sendiri adalah seperti dibawah ini Gambar 4.35 Tampilan Detail Produk

7. Tampilan Keranjang Belanja

Tampilan ini merupakan tampilan antar muka dari daftar belanja atau produk yang telah dipesan sebelumnya oleh pelanggan. Di dalam halaman ini pelanggan dapat merubah jumlah produk yang telah dipesan sebelumnya sesuai dengan yang diinginkan. halaman ini juga dilengkapi tombol navigasi yang bertujuan mengarahkan apabila pelanggan akan melakukan pemesanan kembali ataupun langsung melakukan transaksi. Gambar 4.36 Tampilan Halaman Keranjang Belanja

8. Tampilan Form Data Pembeli

Merupakan halaman yang berisikan form data pelanggan yang sebelumnya telah memesan produk. Data pelanggan tampil secara otomatis bedasarkan data yang sebelumnya telah diisikan oleh pelanggan pada saat melakukan pendaftaran menjadi member. Didalam halaman form ini pelanggan juga diwajibkan mengisikan data metode pembayaran yang akan digunakan, layanan pengiriman serta kota tujuan pengiriman berdasarkan daftar pilihan yang sudah tertera didalam form ini selanjutnya pelanggan dapat melanjutkan transaksi dengan mengklik tombol “lanjut transaksi” yang sudah disediakan. Gambar 4.37 Tampilan Form Data Pembeli

9. Tampilan Halaman Lihat Transaksi

Halaman ini merupakan halaman kelanjutan dari proses transaksi dimana sebelumnya pelanggan telah mengisi data pembeli pada form data pembeli dan kemudian melanjutkan transaksi. Didalam halaman ini terdapat data transaksi berdasarkan data yang sebelumnya telah diiputkan oleh pelanggan beserta data produk, harga dan jumlah yang telah dipesan. Selain itu didalam halaman ini juga pelanggan dapat melihat total pembayaran yang harus dibayar disertai rincian berat produk dan biaya ongkos pengiriman. Gambar 4.38 Tampilan Halaman Lihat Transaksi

10. Tampilan Daftar Pemesanan

Tampilan halaman ini merupakan tampilan halaman yang berisikan daftar pemesanan produk yang telah dipesan oleh pelanggan. Daftar pemesanan ini meliputi nomor pemesanan, tanggal, jam, status pemesanan, status pembayaran, serta bukti resi pengiriman produk apabila pelanggan sudah melakukan transaksi sesuai prosedur. Namun apabila pelanggan belum melakukan konfirmasi pembayaran, pelanggan dapat melakukannya melalui menu “konfirmasi” yang terdapat pada halaman ini, dengan memilih menu tersebut pelanggan akan diarahkan ke halaman form konfirmasi pembayaran untuk selanjutnya mengisikan data pembayaran. Gambar 4.39 Tampilan Halaman Daftar Pemesanan

11. Tampilan Form Konfirmasi Pembayaran

Dalam proses pembelian produk, website ini dilengkapi oleh form konfirmasi dimana form ini ditujukan kepada pelanggan yang telah mejadi member. apabila pelanggan telah menyelesaikan pembayaran belanja via ATM sesuai dengan jumlah total pembelian maka pelanggan diwajibkan mengisi form konfirmasi pembayaran ini, agar nantinya admin dari pihak bananacase mengetahuinya dan mengubah status belanja pelanggan, selanjutnya pihak bananacase dapat memproses pengiriman produk yang telah dipesan sebelumnya oleh pelanggan. Gambar 4.40 Tampilan Form Konfirmasi Pembayaran

12. Tampilan Form Login Admin

Form login admin merupakan form yang disediakan kepada admin untuk menginputkan data login admin sebelum masuk ke halaman admin untuk melakukan pengolahan data. Adapun tampilan dari form tersebut adalah sebagai berikut Gambar 4.41 Tampilan Form Login Admin

13. Tampilan Halaman Pengolahan Produk

Halaman ini adalah halaman yang memuat seluruh data produk yang tersedia, admin dapat mengolah data produk dimana dapat menambahkan ataupun menghapus data produk nantinya. Gambar 4.42 Tampilan Halaman Pengolahan Produk

14. Halaman Data akun Bank

Tampilan halaman ini merupakan tampilan dari daftar akun bank yang digunakan untuk proses pembayaran transaksi di bananacase distro fashion store. Halaman ini terdapat pada halaman admin dimana admin juga dapat mengolah data bank dengan menambahkan atau menghapus data tersebut, tampilan dari halaman ini adalah sebagai berikut : Gambar 4.43 Tampilan Data Akun Bank

15. Halaman Data Ongkos Kirim

Tampilan Halaman ini merupakan tampilan halaman yang memuat data ongkos pengiriman produk beserta data kurir, tarif kg dan tujuan pengirimannya. Dihalaman ini juga dilengkapi tombol navigasi yang nantinya berfungsi apabila admin ingin melakukan perubahan terhadap data ongkos kirim. tombol-tombol tersebut diantaranya terdiri dari tombol hapus, edit serta tombol tambah data ongkos kirim yang nantinya akan mengarahkan admin ke masing-masing halaman. Gambar 4.44 Tampilan Halaman Data Ongkos Kirim

16. Halaman Data Kategori

Halaman ini merupakan halaman yang menampilkan data kategori produk yang tersedia pada bananacase. Didalam halaman ini admin dapat melakukan penambahan data kategori dan juga penghapusan data sesuai dengan yang dinginkan melalui tombol navigasi yang telah disediakan. Gambar 4.45 Tampilan Halaman Data Kategori

17. Tampilan Halaman Pengadaan Produk

Halaman ini merupakan halaman yang memuat data pengadaan produk. Data-data tersebut berupa data waktu, nama produk, jumlah dan ukuran. Di dalam halaman ini juga admin dapat melakukan penambahan dan penghapusan data. Selain itu halaman ini juga menyediakan fasilitas untuk mencetak laporan pengadaan produk yang di urut berdasarkan priode tanggal dan tahun sehingga memudahkan admin dalam membuat laporan pengadaan produk. Gambar 4.46 Tampilan Halaman Pengadaan Produk

18. Tampilan Halaman Laporan Penjualan

Halaman ini adalah halaman yang memuat data penjualan produk dari bananacase. Data penjualan tersebut terdiri dari data pemesanan, data produk, dan data konfirmasi pembayaran. Didalam halaman ini juga admin dapat melakukan konfirmasi pemesanan apakah pesanan produk sudah diproses atau belum sehingga pelanggan mengetahuinya. Selain itu melalui halaman ini juga admin memberikan nomor resi pengiriman apabila produk yang dipesan pelanggan sudah dikirim. Halaman ini juga dilengkapi menu pencetakan laporan penjualan secara otomatis sehingga memudahkan admin dalam melakukan pembuatan laporan penjualan yang di urut berdasarkan priode bulan dan tahun. Gambar 4.47 Tampilan Halaman Data Penjualan Produk.

19. Tampilan Halaman Laporan Persedian Produk

Halaman laporan persediaan produk merupakan halaman yang memuat seluruh data persediaan produk. Melalui halaman inilah nantinya admin dapat mengolah data persediaan dan mencetaknya secara langsung melalui tombol navigasi yang telah disediakan. Gambar 4.48 Tampilan Halaman Data Persediaan Produk. Implementasi Halaman Menu Pelanggan Tabel 4.12 Tabel Implementasi Halaman Menu Pelanggan Menu Deskripsi Nama File Home Merupakan Halaman Utama halaman Pelanggan Index.php Chino Halaman khusus kategori produk celana Chino chino.php Kemeja Halaman khusus produk kategori kemeja kemeja.php tentang halaman menu pelanggan yang berisikan penjelasan singkat profil dari Bananacase About.php Faq Cara Belanja halaman menu pelanggan yang berisikan penjelasan dan petunjuk cara berbelanja online Faq.php di bananacase Kontak Halaman ini berisikan form yang disediakan kepada pelanggan untuk memberikan keluhan, kritik dan saran kepada pihak bananacase Kontak.php keranjang halaman menu ini berisikan daftar belanja produk yang telah dipesan oleh pelanggan keranjang.php konfirmasi pembayaran sub menu ini merupakan sub menu yang disediakan kepada para pelanggan untuk melakukan konfirmasi pembayaran setelah melakukan transfer pembayaran konfirmasi.php status pemesanan halaman menu ini disediakan untuk pelanggan melihat status pemesanan mereka status_pemesanan.php edit profil Halaman ini disedikan untuk pelanggan yang telah menjadi member bilamana mereka akan mengubah data identitas mereka edit_member.php logout menu ini merupakan menu dimana pelanggan dapat keluar dari website dengan menutup akun member mereka terlebih dahulu logout_member.php daftar halaman menu ini berisikan form pendaftaran yang telah disediakan untuk para pelanggan apabila pelanggan ingin mendafar terlebih dahulu untuk menjadi member daftar_member.php Tabel 4.13 Tabel Implementasi Menu Admin Menu Deskrispsi Nama File Dasboard adalah halaman utama pada halaman admin adminindex.php produk merupakan halaman produk dimana admin dapat melihat daftar produk yang telah tersedia dan dapat melakukan penambahan dan penghapusan produk tersebut adminproduk.php tambah produk merupakan halaman sub menu yang ada di dalam menu produk,di dalam halaman ini sendiri disediakan sebuah form, disediakan untuk admin apabila ingin menambahkan data produk baru admintambah_produk.php kategori Merupakan halaman yang berisi daftar kategori dari produk yang tersedia, admin juga dapat menambahkan atau menghapus data kategori ini adminkategori.php tambah kategori halaman ini merupakan halaman yang berisikan form tambah kategori, yang bertujuan sebagai media masukan data kategori jika admin ingin menambahkan data kategori admintambah_kategori.php Stok produk halaman ini merupakan halaman yang adminstok_produk.php berisikan daftar stok produk yang tersedia, admin juga dapat menambahkan jumlah stock produk nantinya tambah stock halaman ini berisikan form yang gunanya sebagai inputan stok produk apabila admin ingin menambahkan data stok produk admintambah_stock.php bank halaman ini berisikan daftar akun bank yang digunakan sebagai media pembayaran pada bananacase distro fashion store admindatabank.php tambah akun bank didalam halaman ini berisikan form yang berguna sebagai media input data akun bank apabila admin ingin menambahkan data akun bank baru untuk bananacase admintambah_bank.php ongkos kirim menu ini akan menunjukan kedalam halaman yang berisikan daftar data ongkos pengiriman beserta perusahaan pengirimannya adminongkir.php tambah ongkos kirim menu ini merupakan sub menu didalam halaman ongkos kirim yang berisikan form penambahan data ongkos pengiriman apabila admin ingin menambahkan data ongkos kirim admintambah_ongkir.php laporan menu ini berisikan daftar pengadaan produk adminlaporan_pengadaan.php pengadaan yang dilakukan oleh pihak shopkeeper. Owner dapat mengetahui data-data produk yang masuk dan laporan pengadaan sendiri dapat dicetak laporan persediaan menu in berisikan daftar persedian produk. Daftar persediaan produk sendiri nantinya dapat dicetak menjadi dokumen dan dijadikan laporan persediaan produk untuk diberikan kepada owner adminlaporan_persediaan.php laporan penjualan menu laporan penjualan merupakan menu dimana admin dapat melihat data penjualan yang telah dilakukan, laporan penjualan ini dapat dilihat berdasarkan periode tertentu sesuai kebutuhan admin adminlaporan_penjualan.php

4.4.5 Implementasi Instalasi Program

Dalam implementasi instalasi program pada website bananacase ini , akan dijelaskan tahap-tahapnya diantaranya : 1. Buka aplikasi WAMP5 seperti dibawah ini Gambar 4.49 Tampilan menu dekstop WampServer 2. Aktifkan aplikasi WAMP5 dengan mengklik icon wamp yang terdapat di tolbar hidden kemudian klik menu start all service seperti gambar dibawah ini. Gambar 4.50 Tampilan Aktifasi Wampserver 3. Selanjutnya buka web browser ketikan localhostbananacase. Gambar 4.51 Tampilan Web Browser