Prosedur penggunaan aplikasi Tampilan awal halaman pada website PT. Cita Kartika Garmindo diawali dengan menu home. Pada tampilan ini, ditampilkan beberapa menu navigasi yang memandu pengguna dalam membeli dan mengontrol persediaan bagi staf. Di bagian kiri terdapat pilihan category dan new product dimana pengguna selalu mendapatkan informasi dari produk terbaru atau melihat kategori dari setiap produk.
Gambar 4.3 Tampilan halaman home bagi non-member
Tampilan berikut adalah product, di sini pengguna yang belum mendaftar (non-member) dapat melihat produk yang tersedia dengan mengklik menu product. Pada halaman ini pengguna yang belum mendaftar tidak bisa memasukkan produk yang dipilih ke dalam cart.
Gambar 4.4 Tampilan halaman product bagi non-member
Pada halaman gambar 4.5 pengguna yang ingin mendaftar dapat mengklik menu register. Pengguna diharuskan mengisi setiap field yang ada sesuai dengan ketentuan. Jika salah satu field kosong pesan error akan muncul. Setelah mengisi data, klik tombol sign-up. Page otomatis akan dialihkan ke halaman login.
Gambar 4.5 Tampilan halaman register bagi non-member
Tampilan gambar 4.6 untuk login, klik menu login pada pojok kanan atas layar. Masukkan username dan password yang telah di daftarkan setelah itu klik submit. Jika tidak sesuai maka pesan error akan muncul.
Gambar 4.6 Tampilan halaman login bagi non-member
Tampilan gambar 4.7 jika pengguna lupa password, klik menu login kemudian klik forgot password. Masukkan username pengguna untuk verifikasi.
Gambar 4.7 Tampilan halaman forgot password(1) bagi non-member
Tampilan
gambar 4.8
merupakan
lanjutan
dari
halaman
sebelumnya.
Setelah
memverifikasi username, jawab pertanyaan keamanan sesuai dengan jawaban yang diisi pada saat registrasi. Klik tombol submit untuk melanjutkan ke tahap berikutnya.
Gambar 4.8 Tampilan halaman forgot password(2) bagi non-member
Tampilan gambar 4.9 Setelah pertanyaan keamanan dijawab dengan benar, masukkan password baru untuk menggantikan password lama. Klik submit untuk menyelesaikan proses penggantian password.
Gambar 4.9 Tampilan Change Password
Tampilan gambar 4.10 klik menu about us untuk melihat tentang perusahaan.
Gambar 4.10 Tampilan halaman about us bagi non-member
Tampilan home untuk pengguna muncul setelah pengguna melakukan login. menampilkan menu navigasi seperti cart untuk melihat produk yang telah dipilih, transaksi untuk melihat transaksi yang telah dilakukan, payment untuk melihat pembayaran, dan about us. Di bagian kiri terdapat pilihan category dan new product dimana pengguna selalu mendapatkan informasi dari produk terbaru atau melihat kategori dari setiap produk.
Gambar 4.11 Tampilan halaman home bagi member
Tampilan gambar 4.12 untuk membeli produk bagi pengguna yang telah login, klik menu product untuk melihat daftar produk. Klik produk yang ingin dibeli.
Gambar 4.12 Tampilan halaman product bagi member
Tampilan gambar 4.13 pilih ukuran yang ingin dibeli dengan menekan tombol radio button di konten kanan. Add to cart untuk memasukkan produk ke daftar barang yang ingin dibeli.
Gambar 4.13 Tampilan halaman product detail bagi member
Tampilan gambar 4.14
pilih jumlah produk yang ingin dibeli, lalu klik Add untuk
menanbahkan ke cart.
Gambar 4.14 Tampilan halaman pilih produk bagi member
Tampilan gambar 4.klik cart untuk melihat produk yang benar benar ingin dibeli. Klik remove all jika tidak ingin membeli. Pilih tipe pembayaran kemudian klik check out untuk membeli.
Gambar 4.15 Tampilan halaman cart bagi member
Tampilan gambar 4.16 klik transaction untuk melihat transaksi yang telah dilakukan.
Gambar 4.16 Tampilan halaman transaction bagi member
Tampilan gambar 4.17 klik payment untuk membayar transaksi yang belum lunas. Centang check box untuk transaksi yang ingin dibayar. Klik pay untuk membayar.
Gambar 4.17 Tampilan halaman payment(1) bagi member
Tampilan gambar 4.18 klik pilih file untuk mengupload bukti pembayaran yang telah dilakukan. Klik pay untuk mengakhiri pembayaran.
Gambar 4.18 Tampilan halaman payment(2) bagi member
Tampilan home dari staf gudang, menampilkan produk dan material terbaru yang baru saja dimasukkan. Dan juga menu navigasi seperti material menampilkan bahan untuk membuat produk, tipe produk untuk menampilkan setiap tipe produk, produk untuk menampilkan produk perusahaan, purchase order untuk membeli bahan, dan payment purchase order untuk membayar purchase.
Gambar 4.20 Tampilan halaman home bagi staf gudang
Tampilan gambar 4.21 klik material untuk menampilkan bahan. Klik update material untuk mengupdate data material dan klik delete material untuk menghapus data material. Klik add material untuk menambahkan bahan baru.
Gambar 4.21 Tampilan halaman view material bagi staf gudang
Tampilan gambar 4.22 setelah klik add material, isi nama bahan, harga dan stok bahan. Klik add material untuk menyelesaikan penambahan bahan.
Gambar 4.22 Tampilan halaman add material bagi staf gudang
Tampilan gambar 4.23 setelah klik update material, ganti harga atau stok bahan yang mengalami perubahan. Klik update material untuk mengakhiri proses update.
Gambar 4.23 Tampilan halaman update material bagi staf gudang
Tampilan gambar 4.24 setelah klik menu product type, klik menu add product type untuk menambahkan tipe produk yang baru(jika ada).
Gambar 4.24 Tampilan halaman view product type bagi staf gudang
Tampilan gambar 4.25 setelah klik add product type, masukkan nama tipe produk lalu klik add product type.
Gambar 4.25 Tampilan halaman add product type bagi staf gudang
Tampilan gambar 4.26 setelah klik menu product, klik add stock untuk produk yang mengalami penambahan stok. Klik add product untuk memasukkan data produk baru yang ingin dipasarkan.
Gambar 4.26 Tampilan halaman view product bagi staf gudang
Tampilan gambar 4.27 setelah klik add product, masukkan semua data produk kemudian klik tombol sign up.
Gambar 4.27 Tampilan halaman add product bagi staf gudang
Tampilan gambar 4.28 setelah klik add stock, masukkan stok untuk size yang mengalami penanbahan kemudian klik add stock.
Gambar 4.28 Tampilan halaman add size bagi staf gudang
Tampilan gambar 4.29 klik menu purchase order untuk menampilkan purchase order yang telah dilakukan. Klik make purchase order untuk membeli bahan.
Gambar 4.29 Tampilan halaman purchase order bagi staf gudang
Tampilan gambar 4.30 setelah klik make purchase order, pilih supplier dan centang material yang ingin dibeli. Klik purchase untuk membeli bahan.
Gambar 4.30 Tampilan halaman make purchase order(1) bagi staf gudang
Tampilan gambar 4.31 setelah klik purchase, masukkan jumlah bahan yang ingin dibeli kemudian klik send untuk mengirim ke supplier.
Gambar 4.31 Tampilan halaman make purchase order(2) bagi staf gudang
Tampilan gambar 4.32 klik payment purchase order untuk membayar purchase yang telah dilakukan. Klik pay untuk purchase yang ingin dibayar.
Gambar 4.32 Tampilan halaman payment purchase order(1) bagi staf gudang
Tampilan gambar 4.33 setelah pilih file untuk mengupload bukti pembayaran. Klik pay untuk membayar.
Gambar 4.33 Tampilan halaman payment purchase order(2) bagi staf gudang
Tampilan home dari staf penjualan. Halaman ini menampilkan transaksi penjualan yang dan pembayaran transaksi penjualan yang baru. Dan juga menu navigasi seperti sales order untuk menampilkan pembelian produk yang dilakukan cutomer, payment sales order untuk mengecek dan memvalidasi pembayaran sales order, produk untuk menampilkan daftar produk, dan customer untuk menampilkan list customer.
Gambar 4.34 Tampilan halaman home bagi staf penjualan
Tampilan gambar 4.35 setelah klik sales order, klik update status untuk mengupdate status pengiriman barang. Klik save as pdf untuk mencetak faktur sales order.
Gambar 4.35 Tampilan halaman sales order bagi staf penjualan
Tampilan gambar 4.36 masukkan customerid pengguna dan tipe pembayaran. Klik search untuk mencari transaksi yang telah dilakukan.
Gambar 4.36 Tampilan halaman search payment sales order bagi staf penjualan
Tampilan gambar 4.37 klik paid sales order untuk customer yang telah mengupload bukti pembayaran. Centang pay this transaction lalu klik pay untuk verifikasi pembayaran transaksi.
Gambar 4.37 Tampilan halaman payment sales order(1)bagi staf penjualan
Tampilan gambar 4.38 klik update status untuk menupdate status pembayaran sudah lunas jika bukti pembayaran telah dikonfirmasi. Back to payment untuk kembali ke halaman sebelumnya.
Gambar 4.38 Tampilan halaman paid sales order bagi staf penjualan
Tampilan
gambar 4.39 untuk customer yang membayar cash, klik pay untuk
memverifikasi pembayaran.
Gambar 4.39 Tampilan halaman payment sales order(2)bagi staf penjualan
Tampilan gambar 4.40 setelah klik menu product, klik update untuk mengupdate data product..
Gambar 4.40 Tampilan halaman view product bagi staf penjualan
Tampilan gambar 4.41edit harga atau diskon yang mengalami perubahan. Klik update product untuk mengubah data produk.
Gambar 4.41 Tampilan halaman update product bagi staf penjualan
Tampilan
home dari manajer. Pada tampilan ini terdapat laporan dari penjualan dan
pembelian terbaru. Halaman ini hanya dapat diakses oleh manajer.
Gambar 4.42 Tampilan halaman home bagi manajer
Tampilan gambar 4.43 setelah klik menu staff, klik update untuk mengubah data staf. Klik delete untuk menghapus data staf dan klik add staff untuk menambahkan staf baru.
Gambar 4.43 Tampilan halaman view staff bagi manajer
Tampilan gambar 4.44 masukkan data staf baru sesuai dengan ketentuan. Klik submit untuk menambahkan data staff ke sistem.
Gambar 4.44 Tampilan halaman add staff bagi manajer
Tampilan gambar 4.45 ubah data staf yang ingin diubah kemudian klik submit untuk mengupdate ke sistem.
Gambar 4.45 Tampilan halaman update staff bagi manajer
Tampilan gambar 4.46 arahkan kursor ke report dan klik sales order untuk menampilkan report sales order. Klik detail untuk melihat detail penjualan setiap bulan.
Gambar 4.46 Tampilan halaman summary sales order bagi manajer
Tampilan gambar 4.47 setelah klik detail, data detail report akan muncul. Klik summary report untuk kembali melihat report pertahun.
Gambar 4.47 Tampilan halaman detail summary sales order bagi manajer
Tampilan pada gambar 4.48 arahkan kursor ke report dan klik Purchase order untuk menampilkan report Purchase order. Klik detail untuk melihat detail penjualan setiap bulan.
Gambar 4.48 Tampilan halaman summary purchase order bagi manajer
Tampilan gambar 4.49 setelah klik detail, data detail report akan muncul. Klik summary report untuk kembali melihat report pertahun.
Gambar 4.49 Tampilan halaman detail summary purchase order bagi manajer
