BAB IV PERANCANGAN INTERFACE 4.1. Rancangan Layar 4.1.1. Struktur Program Setelah menganalisa sistem yang sedang berjalan serta melakukan penelitian terhadap perusahaan terkait, maka dapat di rancang suatu sistem informasi pengiriman ekspor yang baru, yang nantinya diharapkan dapat meningkatkan efektifitas dan efisiensi kinerja pada perusahaan itu sendiri. Keseluruhan dari sistem tersebut dapat dituangkan dalam bentuk program aplikasi, dengan struktur program yang dirancang sebagai berikut : Gambar 4.1. Struktur Program 58
59 4.2. Desain Secara Terinci Desain terinci merupakan suatu pendesainan terhadap suatu sistem secara terinci dan menyeluruh. 4.2.1. Desain Login Sistem Gambar 4.2. Desain Interface Form Login Desain interface login sistem yang digunakan oleh user untuk masuk ke dalam sistem. User memasukkan username dan password sebagai kata kunci dan button login untuk masuk ke menu utama dan siap menggunakan aplikasi. 4.2.2. Desain Interface menu utama user shipping Gambar 4.3. Desain Interface Menu Utama Shipping
60 Setelah shipping berhasil login, sistem akan menampilkan halaman yang berisi menu utama yang dapat diakses oleh shipping. Halaman ini berfungsi untuk mengarahkan user ke menu yang ingin diakses. Ada beberpa pilihan menu yakni menu master data, menu delivery order, menu laporan pengiriman, dan menu tracking cargo, keterangan dari fungsi menu menu tersebut akan diuraikan pada pembahasan selanjutnya. 4.2.3. Desain Interface Menu Data Barang Shipping Gambar 4.4. Desain Interface Menu Data Barang Shipping Desain interface data barang digunakan oleh shipping akan menampilkan informasi data barang. Di menu data barang ini shipping dapat mengolah data barang, mulai dari tambah, edit dan hapus data barang.
61 a. Form Tambah Data Barang Gambar 4.5. Desain Interface Form Tambah Data Barang Form ini digunakan oleh shipping untuk dapat menambah informasi mengenai data barang baru, yang ditujukan kepada admin gudang ekspor. b. Form Update Data Barang Gambar 4.6. Desain Interface Form Update Data Barang Form ini digunakan oleh shipping untuk mengupdate data barang jika terjadi kesalahan dalam penulisan, ataupun perubahan quantity jumlah barang.
62 c. Desain Interface Hapus Data Barang. Gambar 4.7. Desain Interface Notifikasi Hapus Data Barang Tampilan rancangan hapus data barang yang digunakan oleh shipping ketika akan menghapus data barang, sistem akan menampilkan notifikasi peringatan, jika benar ingin menghapus data barang. 4.2.4. Desain Interface Shipping Menu Data Customer Gambar 4.8. Desain Interface Data Customer
63 customer. Desain interface yang digunakan oleh sipping untuk mengolah data a. Desain Interface Tambah Data Customer Gambar 4.9. Desain Interface Form Tambah Data Customer Form ini digunakan oleh shipping untuk menambah data customer baru. b. Update Data Customer Gambar 4.10. Desain Interface Form Update Data Customer
64 Form ini digunakan digunakan oleh shipping untuk mengedit data customer jika ada perubahan data, ataupun kesalahan dalam penulisan data. c. Desain Interface Hapus Data Customer Gambar 4.11. Desain Interface Notifikasi Hapus Data Customer Tampilan rancangan ini digunakan oleh shipping ketika akan menghapus data customer, maka akan muncul notifikasi peringatan jika Yam aka data akan trehapus, dan jika tidak kembali ke halaman data customer. 4.2.5. Desain Interface Delivery Order Gambar 4.12. Desain Interface Form Delivery Order
65 Form ini digunakan oleh shipping untuk membuat data delivery order yang diberikan kepada admin gudang ekspor. Untuk membuat data delivery order shipping harus mengisi semua field yang tersedia kemudian sistem akan menampilkan data delivery order berdasarkan tanggal dan shipping juga dapat mengimport data delivery order. 4.2.6. Desain Interface Tracking Delivery cargo Gambar 4.13. Desain Interface Form Tracking Delivery Cargo Dengan menggunakan form ini, shipping dapat mengetahui laporan pengiriman cargo secara terinci. Untuk dapat mencari laporan pengiriman cargo shipping harus menginput no.kontainer atau no kendaraan, kemudian sistem akan menampilkan data yang dicari.
66 4.2.7. Desain Interface Menu Utama Admin Fg Gambar 4.14. Desain Interface Menu Utama Admin Fg Setelah Admin Fg berhasil login, sistem akan menampilkan halaman yang berisi menu utama yang dapat diakses oleh admin. Halaman ini berfungsi untuk mengarahkan admin ke menu yang ingin diakses. 4.2.8. Desain Interface Mengecek Data Barang Gambar 4.15. Desain Interface Form Cek Data Barang Form ini digunakan admin Fg untuk melihat data barang yang ada digudang ekspor, ada beberapa opsi pilihan cek data barang, yaitu berdasarkan no.po, nama barang, atau cek data berdasarkan tanggal delivery order. Isi field pencarian dan sistem akan menampilkan data berdasarkan opsi pencarian.
67 4.2.9. Desain Interface Mengecek Data Delivery Order Gambar 4.16. Desain Interface Form Mengecek Data Delivery Order Form ini digunakan oleh admin untuk mengecek data delivery order yang diberikan oleh shipping. Untuk mengecek data delivery oder, admin harus mengisi tanggal delivery order yang akan di cek dan sistem akan menampilkan data delivery order berdasarkan tanggal yang diinput. Admin dapat mengexport data delivery oder 4.2.10. Desain Interface Entry BMSE Gambar 4.17. Interface Form Entry Data BMSE
68 Form ini digunakan oleh admin untuk menyimpan data bukti mutasi sepatu ekspor dari gudang plant produksi ke dalam sistem database, data ini digunakan sebagai acuan stok data barang yang ada di gudang ekspor. 4.2.11. Desain Interface Surat Jalan Gambar 4.18. Desain Interface Form Surat Jalan Form ini digunakan admin untuk membuat surat jalan pengiriman barang yang diserahkan kepada pengirim dan bea cukai. Ketika submit data maka data barang digudang ekspor akan berkurang. Untuk membuat surat jalan admin harus mengisi semua field pada form surat jalan. Setelah semua data lengkap admin menekan tombol save untuk menyimpan data surat jalan dan sistem akan menampilkan data yang telah tersimpan.
69 Gambar 4.19. Desain Interface Tampilan Surat Jalan Gambar 4.19. merupakan contoh tampilan output dari rancangan surat jalan pengiriman barang ekspor. 4.2.12. Desain Interface Menu Utama Pimpinan Fg diakses. Gambar 4.20. Desain Interface Menu Utama Pimpinan Fg Halaman ini berfungsi untuk mengarahkan pimpinan ke menu yang ingin
70 4.2.13. Desain Interface Menu Tracking Delivery Cargo Gambar 4.21. Desain Interface Kelola Tracking Delivery cargo Form ini digunakan Oleh pimpinan fg untuk mengolah informasi delivery cargo yang ditujukan kepada bagian shipping dan stakeholder. Pimpinan Fg dapat menambah, mengedit dan meghapus data tracking. a. Form Input Tracking Gambar 4.22. Desain Interface Input Tracking Delivery cargo
71 Form ini digunakan oleh pimpinan Fg untuk memberikan informasi secara rinci data pengiriman cargo kepada bagian shipping, mulai dari jam cargo datang, proses loading sampai pengiriman cargo. b. Form Update Tracking Gambar 4.23. Desain Interface Update Tracking Delivery cargo Gambar 4.23. Merupakan form update tracking delivery cargo yang digunakan pimpinan Fg untuk mengubah data atau waktu pengiriman cargo. c. Notifikasi Hapus Data Tracking Deivery Cargo Gambar 4.24. Desain Interface Notifikasi Hapus Tracking Delivery cargo
72 Form ini digunakan pimpinan Fg untuk menghapus data tracking delivery cargo. Hal ini terjadi ketika cargo yang sudah datang di batalkan pengiriman karena suatu alasan tetentu, misalnya cargo bocor dan lain sebagainya. 4.2.14. Desain Interface Mengecek Laporan Pengiriman Gambar 4.25. Desain Interface Mengecek Laporan Pengiriman Desain interface ini digunakan oleh pimpinan fg ataupun shipping untuk melihat laporan pengiriman berdasarkan periode tanggal.