BAB V : ANALISA HASIL
ANALISIS DAN PERANCANGAN SISTEM
3.2. Perancangan Sistem
3.2.2. Perancangan user interface sistem
Dalam tahap ini akan dibuat desain user interface sistem. Desain user interface merupakan rancangan halaman dari sistem yang akan digunakan oleh user atau pengguna sistem dalam memasukkan atau menampilkan data-data sehingga terjadi interaksi di keduanya. Desain user interface dirancang untuk memudahkan penggunaan sistem sehingga pemakai dapat mengerti langkah demi langkah dalam pengoperasiannya dalam menampilkan, menginputkan atau mengolah data-data yang berhubungan dengan sistem. Untuk mencapai tujuan tersebut, maka haruslah dibuat desain user interface yang mudah dipahami user dan tidak terlalu banyak proses di dalam sebuah halaman. Berikut adalah desain user interface dari sistem informasi distribusi yang akan dikembangkan :
3.2.2.1 Desain halaman Login
57 Gambar 3.23 adalah gambar desain halaman login dari sistem. Halaman login merupakan tampilan awal dari sistem ini. Sebelum user dapat menggunakan sistem, maka user harus melakukan proses login. Dalam halaman ini terdapat sebuah drop down menu yang berisi status login user. Maksudnya untuk mengetahui user tersebut login ke sistem sebagai apa. Ada 4 tipe user yang dapat menggunakan sistem ini, yaitu : marketing, kepala marketing, kepala gudang dan bagian keuangan. Setiap user memiliki keperluan yang berbeda dalam menggunakan sistem. Setelah user memilih status, user mengisi username dan password pada textbox yang telah disediakan pada halaman ini. Dan setelah itu user menekan tombol proses untuk masuk ke dalam sistem atau menekan tombol keluar untuk keluar dari sistem.
3.2.2.2 Desain Halaman Menu
Setelah user melakukan proses login dan user berhasil masuk ke sistem, maka user akan dihadapkan pada halaman menu. halaman menu ini berisi semua proses yang dapat dilakukan oleh user untuk keperluan proses pengelolaan data. halaman menu ini memiliki menu yang berbeda-beda untuk setiap tipe user.
Menu Keluar
Sistem Inform asi Penjualan PT. R atri A rum K laten
Gambar 3.24 Desain halaman menu
Gambar 3.24 adalah gambar desain halaman menu. terdapat dua menu yaitu menu dan keluar. Menu yang ditampilkan akan berbeda untuk setiap tipe
58 user. Untuk user marketing, menu yang disediakan adalah menu pengelolaan data distributor meliputi : tambah, edit, hapus dan lihat data distributor. Selain itu juga disediakan menu pengelolaan data pesanan yang meliputi : tambah, edit, hapus dan lihat data pesanan. Untuk user kepala marketing, menu yang disediakan adalah menu lihat data yang meliputi : lihat data distributor dan lihat data pesanan. Selain itu juga disediakan menu laporan yang meliputi : laporan data distributor dan laporan data pesanan. Untuk user kepala gudang, menu yang disediakan adalah menu pengelolaan data barang yang meliputi : tambah, edit dan lihat data stok barang. Selain itu juga disediakan menu pengelolaan retur penjualan yang meliputi : tambah, edit, hapus dan lihat data retur penjualan. Selain itu juga disediakan menu pengelolaan data pengiriman barang yang meliputi : pengiriman barang pesanan dan pengiriman barang retur. Dan juga disediakan menu laporan yang meliputi : laporan barang rusak, laporan barang keluar dan laporan retur penjualan. Untuk user bagian keuangan, menu yang disediakan adalah menu pengelolaan data pemasukkan yang meliputi : pembayaran distributor dan pelunasan distributor. Selain itu juga disediakan menu laporan pembayaran distributor. Menu keluar digunakan untuk keluar dari sistem. Jika user memilih menu keluar ini, maka user akan keluar dari halaman menu dan akan kembali ke halaman login.
59
3.2.2.3 Desain Halaman Tambah data distributor
Gambar 3.25 Desain halaman tambah data distributor
Gambar 3.25 adalah gambar desain halaman tambah data distributor. Halaman ini akan digunakan oleh marketing jika akan melakukan proses penambahan data distributor. User tinggal mengisi data-data pada textbox yang telah disediakan. Untuk data jaminan, disediakan drop down menu sehingga user tinggal memilih salah satu. Untuk data wilayah pemasaran, user tinggal mengisi pada tabel yang telah disediakan. Setelah semua data diisikan, user tinggal menekan tombol proses dan sistem akan menyimpan data tersebut ke dalam database.
3.2.2.4 Desain Halaman Edit data distributor
60 Gambar 3.26 adalah dambar desain halaman edit data distributor. Halaman ini akan digunakan oleh marketing jika akan melakukan proses edit data distributor. User tinggal memasukkan id distributor dan menekan tombol tampil data. Sistem akan menampilkan data-data distributor sesuai masukkan id distributor user pada field-field yang tersedia. Setelah itu user tinggal mengedit data-data yang ingin diedit dan menekan tombol proses untuk menyimpan kembali data-data tersebut ke dalam database.
3.2.2.5 Desain Halaman Hapus data distributor
Gambar 3.27 Desain halaman hapus data distributor
Gambar 3.27 adalah gambar desain halaman hapus data distributor. Halaman ini akan digunakan marketing jika akan melakukan proses hapus data distributor. Pada halaman ini disediakan tabel yang berisi daftar semua distributor PT. Ratri Arum. Untuk melakukan proses penghapusan, user tinggal memasukkan id distributor yang akan dihapus dan menekan tombol proses. Sistem akan menghapus data yang dimaksud dari database.
61
3.2.2.6 Desain Halaman Lihat data distributor
Gambar 3.28 Desain halaman lihat data distributor
Gambar 3.28 adalah gambar desain halaman lihat data distributor. Form ini akan digunakan user jika akan melihat data distributor. Pada halaman ini disediakan tabel yang berisi daftar distributor PT.Ratri Arum. Untuk melihat data detail dari distributor, user tinggal memasukkan id distributor yang ingin dilihat datanya dan menekan tombol tampil data. Maka sistem akan menampilkan data-data sesuai dengan masukkan id distributor user pada field-field yang disediakan.
62
3.2.2.7 Desain Halaman Tambah Data Pesanan
Gambar 3.29 Desain halaman tambah data pesanan
Gambar 3.29 adalah gambar desain halaman tambah data pesanan. Halaman ini akan digunakan marketing jika akan menambah data pesanan. Pada halaman ini disediakan tabel yang berisi daftar semua distributor PT. Ratri Arum. User tinggal memasukkan data-data pesanan pada field yang telah disediakan. Untuk nama distributor, user tidak perlu menuliskan lagi. User tinggal memasukkan id distributor dan sistem akan menampilkan nama distributor pada textbox yang sesuai. Untuk data detail pesanan, user tinggal memasukkan data-datanya pada tabel yang telah disediakan. Setelah itu user tinggal menekan tombol proses dan sistem akan menyimpan data-data tersebut ke dalam database. Setelah itu sistem akan menampilkan halaman untuk mencetak bukti pemesanan barang.
63
3.2.2.8 Desain Halaman Edit Data Pesanan
Gambar 3.30 Desain halaman edit data pesanan
Gambar 3.30 adalah gambar desain halaman edit data pesanan. Halaman ini digunakan oleh marketing jika akan megedit data pesanan. User tinggal memasukkan no pesanan yang akan diedit data pesanannya dan sistem akan secara otomatis menampilkan data-data pesanan yang sesuai dengan masukkan no pesanan user. Setelah user selesai mengedit data pesanan, user menekan tombol proses dan sistem akan menyimpan data tersebut ke dalam database. Setelah itu sistem akan menampilkan halaman untuk mencetak bukti pemesanan barang.
64
3.2.2.9 Desain Halaman Hapus Data Pesanan
Gambar 3.31 Desain halaman hapus data pesanan
Gambar 3.31 adalah gambar desain halaman hapus data pesanan. Halaman ini digunakan oleh marketing jika akan menghapus data pesanan. Pada halaman ini disediakan tabel yang berisi daftar semua pesanan. User memasukkan no pesanan yang akan dihapus dan menekan tombol proses, maka sistem akan menghapus data tersebut dari database.
3.2.2.10 Desain Halaman Lihat Data Pesanan
65 Gambar 3.32 adalah gambar desain halaman lihat data pesanan. Pada halaman ini disediakan daftar semua pesanan. Datanya meliputi : no pesanan, id distributor, tanggal pesan, keterangan pengiriman dan keterangan pembayaran. Untuk melihat detail pesanan, user tinggal memasukkan no pesanan. Sistem akan menampilkan data pesanan yang sesuai dengan masukkan no pesanan user.
3.2.2.11 Desain Bukti Pemesanan
BUKTI PEMESANAN BARANG
No Pesanan : <No pesanan yang akan dicetak>
Nama Distributor : <Nama distributor>
Tanggal Pesan : <tanggal pesan>
Kode Barang Nama Barang Harga Satuan Jumlah Pesan Sub Total
Total Harga : <total harga pe mesanan>
ID Distributor : <id distributor>
Gambar 3.33 Desain bukti pemesanan
Gambar 3.33 adalah gambar desain bukti pemesanan barang. Bukti pemesanan tersebut diperlukan distributor untuk pembayaran atas pemesanan barang. Dalam halaman ini terdapat no pesanan, id distributor, nama distributor, tanggal pesan, detail pesanan dan total harga.
66
3.2.2.12 Desain Halaman tambah data pembayaran distributor
Gambar 3.34 Desain Halaman tambah data pembayaran
Gambar 3.34 adalah gambar desain halaman tambah data pembayaran. Halaman ini digunakan oleh bagian keuangan jika akan menambah data pembayaran distributor. Pada halaman ini disediakan tabel yang berisi daftar pesanan yang datanya meliputi no pesanan, id distributor, dan Total Harga. Data pesanan yang ditampilkan adalah data pesanan yang belum melakukan pembayaran sama sekali. Setelah itu user memasukkan no pesanan dan sistem akan menampilkan total harga atas no pesanan yang dimasukkan. Setelah itu user mengisi data pembayaran yang lain dan menekan tombol proses. Maka sistem akan memprosesnya dan menyimpan data pembayaran tersebut ke dalam database. Setelah itu sistem akan menampilkan halaman untuk mencetak bukti pembayaran.
67
3.2.2.13 Desain Halaman pelunasan pembayaran
Gambar 3.35 Desain Halaman pelunasan pembayaran
Gambar 3.35 adalah gambar desain halaman pelunasan pembayaran. Halaman ini digunakan oleh bagian keuangan jika akan melayani pelunasan pembayaran oleh distributor. Pada halaman ini disediakan tabel yang berisi daftar pesanan yang datanya meliputi no pesanan, id distributor,total harga, jumlah bayar dan kekuangan. Data pesanan yang ditampilkan adalah data pesanan yang masih mempunyai kekurangan pembayaran. User tinggal memasukkan no pembayaran dan sistem akan menampilkan no pesanan dan jumlah yang harus dibayarkan sesuai dengan masukkan no pembayaran. User tinggal memasukkan tanggal pelunasan dan menekan tombol proses, maka sistem akan memprosesnya dan menyimpan data pelunasan tersebut ke dalam database. Setelah itu sistem akan menampilkan halaman untuk mencetak bukti pelunasan.
68
3.2.2.14 Desain Bukti Pembayaran
BUKTI PEMBAYARAN
No Pembayaran : <No pembayaran yang akan dicetak> Tanggal : <Tanggal pembayaran>
No Pesanan : < No pesanan>
Nama Distributor : <Nama distributor>
Total Harga : <total harga>
Jumlah dibaya rkan : <jumlah uang yang dibayarkan>
Sisa pembayaran : <kekurangan pembayaran>
Jatuh Tempo : <tanggal batas akhir pelunasan>
Pembayar
<Nama distributor>
Penerima
Bagian Keuangan
Gambar 3.36 Desain bukti pembayaran
Gambar 3.36 adalah gambar desain bukti pembayaran. Bukti pembayaran ini diperlukan distributor untuk melakukan pelunasan pembayaran. Distributor yang dimaksud adalah distributor yang melakukan pembayaran secara kredit.
3.2.2.15 Desain Bukti Pelunasan
BUKTI PELUNASAN
Atas No Pembayaran : <No pembayaran> Tanggal : <Tanggal pelunasan>
No Pesanan : < No pesanan>
Nama Distributor : <Nama distributor>
Jumlah dibaya rkan : <jumlah uang yang dibayarkan>
Sisa pembayaran : <kekurangan pembayaran>
Pembayar
<Nama distributor>
Penerima
Bagian Keuangan
Gambar 3.37 Desain bukti pelunasan
Gambar 3.37 adalah gambar desain bukti pelunasan. Bukti pelunasan ini akan dicetak setelah distributor melakukan pelunasan pembayaran atas pesanannya. Distributor yang dimaksud adalah distributor yang melakukan pembayaran secara kredit.
69
3.2.2.16 Desain Halaman Pengiriman Barang Pesanan
Gambar 3.38 Desain halaman pengiriman barang pesanan
Halaman ini digunakan jika kepala gudang akan melakukan pengiriman barang. User tinggal memasukkan no pesanan dan sistem akan menampilkan nama distributor, alamat dan detail pengiriman. User tinggal mengisi tanggal pengiriman dan menekan tombol proses. Maka sistem akan memproses dan menyimpan data tersebut ke database. Setelah itu sistem akan menampilkan halaman untuk mencetak bukti pengiriman barang pesanan.
3.2.2.17 Desain bukti pengiriman barang pesanan
BUKTI PENGIRIMAN BARANG PESANAN
No Pengiriman : < No pengiriman yang akan dicetak> Tanggal : <Tanggal pengiriman>
No Pesanan : < No pesanan>
Nama Dist ributor : <Nama distributor>
Alamat : <alamat pengiriman>
Penerima
<Nama distributor>
Pengirim
Kepala Gudang
Detail Pengi riman
Kode Barang Nama Barang Jumlah
70
3.2.2.18 Desain halaman pengiriman barang retur
Gambar 3.40 Desain halaman pengiriman barang retur
User memasukkan no retur dan sistem akan menampilkan data retur dan data detail retur sesuai dengan masukkan no retur user. Setelah itu user menekan tombol proses, maka sistem akan memprosesnya dan menyimpan data tersebut ke dalam database. Setelah itu sistem akan menampilkan halaman untuk mencetak bukti pengiriman barang retur.
3.2.2.19 Desain bukti pengiriman barang retur
BUKTI PENGIRIMAN BARANG RETUR
No Retur : <No retur yang akan dicetak>
Tanggal : <Tanggal pengiriman>
Nama Distributor : <Nama distributor>
Alamat : <alamat pengiriman>
Penerima
<Nama distributor>
Pengirim
Kepala Gudang
Detail Retur
Kode Barang Nama Barang Jumlah
71
3.2.2.20 Desain halaman tambah stok barang
Gambar 3.41 Desain halaman tambah stok barang
Halaman ini digunakan jika kepala gudang akan melakukan penambahan stok barang. User tinggal memasukkan kode barang dan sistem akan menampilkan stok terakhir. User tinggal mengisi jumlah penambahan stok dan tanggal. Setelah itu user menekan tombol proses. Maka sistem akan memproses dan menyimpan data tersebut ke database.
3.2.2.21 Desain halaman edit stok barang
Gambar 3.42 Desain halaman edit stok barang
Halaman ini digunakan jika kepala gudang akan melakukan pengeditan stok barang. User tinggal memasukkan kode barang dan sistem akan menampilkan jumlah stok. User tinggal mengisi jumlah stok yang baru dan
72 tanggal. Setelah itu user menekan tombol proses. Maka sistem akan memproses dan menyimpan data tersebut ke database.
3.2.2.22 Desain halaman lihat data barang
Gambar 3.43 Desain halaman lihat data barang
Halaman ini digunakan jika kepala gudang akan melihat stok barang. Selain itu, pada halaman ini, disediakan pula fungsi untuk mengedit harga. User tinggal memasukkan kode barang dan sistem akan menampilkan harga lama. User tinggal mengisi harga yang baru dan tanggal. Setelah itu user menekan tombol proses. Maka sistem akan memproses dan menyimpan data tersebut ke database.
73
3.2.2.23 Desain halaman tambah data retur
Gambar 3.44 Desain halaman tambah data retur
User memasukkan no pengiriman dan sistem akan menampilkan no pesanan beserta dengan detail pesanan. Setelah itu user mengisi data retur dan menekan tombol proses. Sistem akan memproses dan menyimpan data tersebut ke database. Setelah itu sistem menampilkan halaman untuk mencetak bukti retur.
3.2.2.24 Desain bukti retur
BUKTI RETUR
Atas No pengiriman : <No pengiriman> Tanggal : <Tanggal retur>
No Retur : <No retur>
Nama Distributor : <Nama distributor>
Pembuat
Kepala Gudang
Detail Retur
Kode Barang Nama Barang Jumlah Retur
74
3.2.2.25 Desain halaman edit data retur
Gambar 3.46 Desain halaman edit data retur
Untuk mengedit data retur, user memasukkan no retur yang akan diedit dan sistem akan menampilkan data-datanya. Setelah selesai mengedit, user menekan tombol proses. Sistem akan memproses dan menyimpan data tersebut ke database. Setelah itu sistem menampilkan halaman untuk mencetak bukti retur.
3.2.2.26 Desain halaman hapus data retur
75 Untuk menghapus data retur, user tinggal memasukkan no retur yang akan dihapus dan menekan tombol proses.maka sistem akan memprosesnya dan menghapus data retur tersebut dari database.
3.2.2.27 Desain halaman Lihat data retur
Gambar 3.48 Desain halaman lihat data retur
Halaman ini digunakan untuk melihat data retur. Pada halaman ini disediakan tabel yang memuat daftar retur. Untuk melihat detail retur, user tinggal memasukkan no retur saja.
76
3.2.2.28 Desain halaman cetak laporan data distributor
Gambar 3.49 Desain halaman cetak laporan data distributor
Halaman pada gambar 3.49 digunakan jika kepala marketing ingin mencetak laporan daftar distributor. User tinggal menekan tombol PRINT.
3.2.2.29 Desain halaman cetak laporan data pesanan
77
Halaman pada gambar 3.50 digunakan jika kepala marketing ingin mencetak laporan data pesanan. User tinggal memasukkan tanggal dari dan tanggal sampai dan setelah itu menekan tombol PRINT.
3.2.2.30 Desain halaman laporan data pembayaran distributor
Gambar 3.51 Desain halaman cetak laporan data pembayaran distributor
Halaman pada gambar 3.51 digunakan jika bagian keuangan ingin mencetak laporan pembayaran distributor. User tinggal memasukkan tanggal dari dan tanggal sampai dan setelah itu menekan tombol PRINT.
3.2.2.31 Desain halaman cetak laporan retur penjualan
78
Halaman pada gambar 3.52 digunakan jika kepala gudang ingin mencetak laporan retur penjualan. User tinggal memasukkan tanggal dari dan tanggal sampai dan setelah itu menekan tombol PRINT.
3.2.2.32 Desain halaman cetak laporan barang rusak
Gambar 3.53 Desain halaman cetak laporan barang rusak
Halaman pada gambar 3.53 digunakan jika kepala gudang ingin mencetak laporan barang rusak. User tinggal menekan tombol PRINT. Selain itu, pada halaman ini disediakan fungsi untuk mengirim barang yang rusak ke bagian produksi untuk didaur ulang. Dengan kata lain, barng rusak yang berada di gudang akan dikembalikan ke bagian produksi. User tinggal memasukkan kode barang dan sistem akan menampilkan jumlah barang rusak. Setelah itu user tinggal menekan tombol SUBMIT.
79
3.2.2.33 Desain halaman cetak laporan barang keluar
Gambar 3.54 Desain halaman cetak laporan barang keluar
Halaman pada gambar 3.54 digunakan jika kepala gudang ingin mencetak laporan barang keluar. User tinggal memasukkan tanggal dari dan tanggal sampai dan setelah itu menekan tombol PRINT.