BAB IV PERANCANGAN SISTEM 4.1 Spesifikasi Sistem Komputer Suatu sistem komputer merupakan gabungan dari beberapa peralatan komputer yang saling berhubungan. Komputer juga mempunyai aspek-aspek dasar sebagai fasilitas yang secara prinsipil harus ada apabila suatu perusahaan telah memasuki langkah maju dengan menggunakan komputer sebagai alat bantu dalam pengolahan data. Aspek dasar yang dimaksud adalah: 1. Aspek Teknis a. Perangkat Lunak (Software) b. Perangkat Keras (Hardware) c. Tenaga Pelaksanaan (Brainware) Untuk memanfaatkan komputer secara maksimal, aspek-aspek tersebut harus bekerja secara terpadu. Perangkat keras sebagai mesin untuk komputer dengan dibantu perangkat lunak dan tenaga pelaksanaan harus dapat berinteraksi dengan baik, karena aspek tersebut saling berhubungan satu dengan lainnya dalam melakukan pengolahan data yang nantinya akan menghasilkan informasi yang bermanfaat. Dalam sistem informasi aspek non teknis juga sangat membantu dalam melakukan suatu proses pengolahan data yang dilakukan, dengan adanya dukungan manajemen yang sesuai dengan aplikasi sistem yang dibuat. Kedisiplinan dan ketelitian dari seorang tenaga pelaksana dalam melakukan proses pengolahan data yang sangat diperlukan. Suatu program yang baik tidak akan tercapai bila tidak didukung oleh sarana atau peralatan yang baik pula. Sarana pendukung suatu program tidak harus selalu menggunakan merek tertentu, tetapi yang penting dapat berinteraksi dengan sistem komputer yang ada agar dapat beroperasi dengan baik. 71
72 4.1.1. Spesifikasi Hardware Spesifikasi perangkat keras yang digunakan untuk membuat aplikasi ini adalah sebagai berikut: a. Tipe komputer : Laptop b. Processor : Intel Core i3 c. Ram : 2 GB d. Harddisk : 500 GB e. Monitor : 14 inch 4.1.2. Spesifikasi Software Perangkat lunak yang digunakan dalam membuat aplikasi ini adalah sebagai berikut: a. Operating System : Microsoft Windows 8 b. Database : MYSQL versi 5.6.21 c. Web Server : XAMPP 3.2.1 d. Internet Browser : Mozila Firefox 49.0.2 4.2. Perancangan Struktur Tampilan Login Menu Utama Master Transaksi Administrasi Laporan Pegawai Unloading User Kapal Sounding Pelabuhan Supplier Gambar 4.1 Sruktur Tampilan
73 Setelah melakukan login, maka semua user akan masuk ke menu utama, tapi setiap user hanya hanya dapat mengakses ke menu sesuai dengan hak aksesnya masing-masing. Untuk menu daftar piutang dan laporan, semua user dapat mengaksesnya, sedangkan menu pembayaran hanya dapat diakses oleh Collector, menu verifikasi data oleh Collector Manager, menu verifikasi pembayaran oleh Staf Verifikasi dan approval oleh Finance Manager. 4.3. Rancangan User Interface Berikut ini adalah user interface beserta skenario penggunaannya dari Perancangan Sistem Manajemen Pengelolaan Data Pembongkaran Kapal Pada PT SMART Tbk Berbasis Web. 4.3.1. Halaman Login Halaman login akan muncul saat pertama kali aplikasi digunakan. User diminta untuk memasukkan username dan password. Gambar 4.2 Rancangan Halaman Login
74 Setelah user memasukkan username dan password, kemudian tap tombol login, maka sistem akan mengecek apakah data username dan password tersebut sesuai dengan yang telah terdaftar di sistem. Jika sesuai, maka akan masuk ke menu utama dan jika gagal, maka sistem akan menampilkan pesan untuk memasukkan username dan password yang benar. 4.3.2. Rancangan Halaman Menu Utama Halaman menu utama akan muncul setelah user melakukan login. Tapi menu yang dapat diakses akan terbatas, tergantung hak akses masing-masing. Gambar 4.3 Rancangan Halaman Menu Utama
75 4.3.3. Rancangan Halaman Form Input User Halaman ini merupakan halaman form input data user dimana biodata user seperti nama, username, level dan status aktif di input pada halaman ini. Berikut merupakan rancangan pada halaman tersebut : Gambar 4.4 Rancangan Form Input User 4.3.4. Rancangan Halaman Tampil Data User Halaman ini merupakan halaman untuk melihat data user yang telah di inputkan sebelumnya. Gambar 4.5 Rancangan Tampil Data User
76 4.3.5. Rancangan Menu Master Halaman ini merupakan halaman untuk melihat beberapa menu master yang ada pada sistem informasi pembongkaran kapal yang terdiri dari master pegawai, master kapal, master pelabuhan dan master supplier. Gambar 4.6 Rancangan Halaman Menu Master 4.3.6. Rancangan Halaman Form Input Pegawai Halaman ini merupakan halaman form input data rancangan pada halaman tersebut : pegawai. Berikut merupakan Gambar 4.7 Rancangan Form Input Data Pegawai
77 4.3.7. Rancangan Halaman Tampil Data Pegawai Halaman ini merupakan halaman untuk melihat data pegawai yang telah di inputkan sebelumnya. Gambar 4.8 Rancangan Tampil Data Pegawai 4.3.8. Rancangan Halaman Form Input Data Kapal Halaman ini merupakan halaman form input data Kapal. Berikut merupakan rancangan pada halaman tersebut : Gambar 4.9 Rancangan Form Input Data Kapal
78 4.3.9 Rancangan Halaman Tampil Data Kapal Halaman ini merupakan halaman untuk melihat data Kapal yang telah di inputkan sebelumnya. Gambar 4.10 Rancangan Tampil Data Kapal 4.3.10. Rancangan Halaman Form Input Data Pelabuhan Halaman ini merupakan halaman form input data pelabuhan. Berikut merupakan rancangan pada halaman tersebut : Gambar4.11 Rancangan Form Input Data Pelabuhan
79 4.3.11. Rancangan Halaman Tampil Data Pelabuhan Halaman ini merupakan halaman untuk melihat data pelabuhan yang telah di inputkan sebelumnya. Gambar 4.12 Rancangan Halaman Tampil Data Pelabuhan 4.3.12. Rancangan Halaman Form Input Data Supplier Halaman ini merupakan halaman form input data supplier. Berikut merupakan rancangan pada halaman tersebut : Gambar 4.13 Rancangan Form Input Data Supplier
80 4.3.13 Rancangan Halaman Tampil Data Supplier Halaman ini merupakan halaman untuk melihat data supplier yang telah di inputkan sebelumnya. Gambar 4.14 Rancangan Halaman Tampil Data Supplier 4.3.14. Rancangan Menu Transaksi Pada Sistem Informasi Pembongkaran Kapal Halaman ini merupakan halaman untuk melihat beberapa menu master transaksi yang ada pada sistem informasi pembongkaran kapal yaitu master unloading dan master sounding. Gambar 4.15 Halaman Menu Master Transaksi
81 4.3.15. Rancangan Halaman Form Input Data Sounding Halaman ini merupakan halaman form input data sounding. Berikut merupakan rancangan pada halaman tersebut : Gambar 4.16 Halaman Form Input Data Sounding 4.3.16. Rancangan Halaman Tampil Data Sounding Halaman ini merupakan halaman untuk melihat data sounding yang telah di inputkan sebelumnya. Gambar 4.17 Rancangan Halaman Tampil Data Sounding
82 4.3.17. Rancangan Halaman Form Input Data Unloading Halaman ini merupakan halaman form input unloading. Berikut merupakan rancangan pada halaman tersebut : Gambar 4.18 Halaman Form Input Data Unloading
83 4.3.18. Rancangan Halaman Tampil Data Unloading Halaman ini merupakan halaman untuk melihat data unloading yang telah di inputkan sebelumnya. Berikut merupakan rancangan pada halaman tersebut : Gambar 4.19 Rancangan Halaman Tampil Data Unloading 4.3.19. Rancangan Halaman Cetak Laporan Halaman ini merupakan halaman untuk mencetak laporan berdasarkan kategori laporan yang akan dicetak. Berikut merupakan rancangan pada halaman tersebut : Gambar 4.20 Rancangan Halaman Cetak Laporan
84 4.3.20. Rancangan Halaman Tampil Laporan Halaman ini merupakan halaman untuk melihat data laporan yang sudah dicetak sebelumnya. Berikut merupakan rancangan pada halaman tersebut : 4.3.21. Rancangan Halaman Logout Gambar 4.21 Halaman Tampil Laporan Halaman ini merupakan halaman tampilan apabila akan keluar dari sistem informasi pembongkaran kapal. Berikut merupakan rancangan dari halaman tersebut : Gambar 4.22 Rancangan Halaman Logout