4.2 Perancangan Antar Muka
Interface merupakan tampilan dari suatu aplikasi perangkat lunak yang berperan sebagai media komunikasi user dengan aplikasi perangkat lunak
tersebut. Perancangan antar muka user sangat penting untuk memenuhi kriteria yang mudah digunakan, menarik dan nyaman digunakan oleh user. Oleh
karena itu dibuatlah rancangan antar muka untuk memudahkan user.
4.2.1 Struktur Menu
Rancangan struktur menu dibuat untuk memudahkan user dalam melakukan penggunaan fungsi-fungsi program yang ada pada sistem ini.
Struktur menu dari aplikasi ini dibuat untuk client dan dapat dilihat pada gambar berikut ini:
Menu Utama Pengunjung
Member Administrasi
Home Company Profile
Partners Contact Details
Send Comment Login Member
Pencarian Login Member
Login Home
Procedure SPK Payment Internasional
SPK Internasional Procedure Payment
Information Logout
Data Admin
Data Member Data Driver
Data Kerani Data Kurir
Data Kendaraan Data Kritik Saran
SPK Internasional STT Internasional
Invoice Internasional Data Checking
Checking SPK
Payment Internasional Data STT
Laporan SPK Laporan STT
Laporan Payment Laporan Checking
Laporan Invoice Logout
Data Invoice Manager
Marketing Login
Logout Manager
Finance Login
Logout
Gambar 4.6 Struktur Menu
4.2.2 Perancangan Input
Perancangan input merupakan gambaran dalam pembuatan antarmuka untuk memasukkan data yang terdiri dari perancangan input :
1. Perancangan Input Pencarian Berikut adalah perancangan form pencarian yang akan diisi oleh
pengunjung atau member.
Pencarian
Id SPK :
CARI Id SPK
Member Nama penerima
Alamat Penerima Destinations
Contens Comodity
Weight Amount
Status
Gambar 4.7 Perancangan Input Pencarian 2. Perancangan Input Login Member
Berikut adalah perancangan form login member yang akan diisi oleh member.
Login member
Login Member
Login
Gambar 4.8 Perancangan Input Login Member
3. Perancangan Input Login Marketing, Finance dan Administrasi Berikut adalah perancangan form login yang akan diisi oleh
manager marketing, manager finance dan administrasi.
Login admin
Login Admin
Login
Gambar 4.9 Perancangan Input Login Admin
4. Perancangan Input SPK Internasional Berikut adalah perancangan form SPK Internasional yang akan diisi
oleh member.
SPK Internasional
Member
Pesan
Telepon Penerima : Tanggal Pengiriman :
Alamat Penerima : Nama Penerima :
Destination : Type Contens :
Weight kg : Meas :
Jasa Via :
Reset member
Penerima
Selection Service
Selection Rincian Barang
Selection
Gambar 4.10 Perancangan Input SPK Internasional
5. Perancangan Input Payment Internasional Berikut adalah perancangan form Payment Internasional yang akan
diisi oleh member.
Payment Internasional
No Invoice :
Input No Payment
No Invoice Tgl jatuh tempo
Tgl bayar Tagihan awal
Denda Tagihan akhir
Bukti transfer Reset
Selection
Upload Foto Bukti Bayar :
Choose File
Gambar 4.11 Perancangan Input Payment Internasional 6. Perancangan Input Data Member
Form input data member dilakukan oleh manager marketing apabila ada data member yang baru. Berikut perancangan input data
member.
Input Member
Username Member :
Pesan
No. Telp Perusahaan Nama Perusahaan :
Nama Pimpinan : Password Member :
Email Perusahaan : Alamat Perusahaan :
Nomor TDP : Nomor NPWP :
Comodity :
Reset
Silahkan inputkan data Member Wakil Perusahaan :
No. Telp Wakil :
Gambar 4.12 Perancangan Input Data Member
7. Perancangan Input Data Driver Form input data driver dilakukan oleh manager marketing apabila
ada data driver yang baru. Berikut perancangan input data driver.
Tambah Data Driver
Id Driver :
Save
Telepon : No KTP :
No SIM : Nama Driver :
Status :
Cancel
Pengolahan Driver
Alamat :
Selection
Gambar 4.13 Perancangan Input Data Driver 8. Perancangan Input Data Kerani
Form input data kerani dilakukan oleh manager marketing apabila ada data kerani yang baru. Berikut perancangan input data kerani.
Tambah Data Kerani
Id Kerani :
Save
Telepon : Nama :
Cancel
Pengolahan Kerani
Alamat :
Gambar 4.14 Perancangan Input Data Kerani
9. Perancangan Input Data Kurir Form input data kurir dilakukan oleh manager marketing apabila
ada data kurir yang baru. Berikut perancangan input data kurir.
Tambah Data Kurir
Id Kurir :
Save
Telepon : Nama :
Cancel
Pengolahan Kurir
Alamat :
Gambar 4.15 Perancangan Input Data Kurir 10. Perancangan Input Data Kendaraan
Form input data kendaraan dilakukan oleh manager marketing apabila ada data kendaraan yang baru. Berikut perancangan input
data kendaraan.
Tambah Data Kendaraan
Id Kendaraan :
Save
Kapasitas : Jenis :
Cancel
Pengolahan Kendaraan
No Polisi : Status :
Selection
Gambar 4.16 Perancangan Input Data Kendaraan
11. Perancangan Input Data Checking Form input data checking dilakukan oleh administrasi apabila ada
data checking yang baru. Berikut perancangan input data checking.
Tambah Checking
Input
Kerani : Id SPK :
Reset SPK yang terkait
Lainnya
Selection Selection
Gambar 4.17 Perancangan Input Data Checking 12. Perancangan Input Data STT
Form input data STT dilakukan oleh administrasi apabila ada data STT yang baru. Berikut perancangan input data STT.
Tambah STT
Input
Tanggal Keberangkatan Id SPK :
Reset SPK yang terkait
Lainnya
Selection
Selection
Driver : Kendaraan :
Selection
Gambar 4.18 Perancangan Input Data STT
13. Perancangan Input Data Invoice Form input data invoice dilakukan oleh manager finance apabila ada
data invoice yang baru. Berikut perancangan input data invoice.
Tambah Invoice
Input
Id SPK :
Reset SPK yang terkait
Selection
Gambar 4.19 Perancangan Input Data Invoice 14. Perancangan Input Laporan SPK
Form input laporan SPK dilakukan oleh manager marketing apabila sudah mendekati akhir bulan. Berikut perancangan input data
laporan SPK.
Tambah Laporan SPK
Tampilkan
Tanggal Awal :
Home
Selection Laporan SPK
Status : Tanggal Akhir :
Id SPK ETD
Member Nama Penerima
Via Comodity
Weight kg Amount USD
Status
Print Laporan SPK Internasional
Gambar 4.20 Perancangan Input Laporan SPK
15. Perancangan Input Laporan Checking Form input laporan checking dilakukan oleh administrasi apabila
sudah mendekati akhir bulan. Berikut perancangan input data laporan Checking.
Tambah Laporan Checking
Tampilkan
Tanggal Awal :
Home Laporan Checking
Tanggal Akhir :
Id SPK Id Checking
Nama Kerani Tanggal Checking
Status
Print Laporan Checking
Gambar 4.21 Perancangan Input Laporan Checking 16. Perancangan Input Laporan STT
Form input laporan STT dilakukan oleh administrasi apabila sudah mendekati akhir bulan. Berikut perancangan input data laporan
STT.
Tambah Laporan STT
Tampilkan
Tanggal Awal :
Home Laporan STT
Tanggal Akhir :
Id SPK No STT
Id Check Tanggal Keberangkatan Tanggal Terkirim
Print Laporan STT
Kendaraan Driver
Gambar 4.22 Perancangan Input Laporan STT
17. Perancangan Input Laporan Invoice Form input laporan invoice dilakukan oleh manager finance apabila
sudah mendekati akhir bulan. Berikut perancangan input data laporan invoice.
Tambah Laporan Invoice
Tampilkan
Tanggal Awal :
Home
Selection Laporan Invoice
Status : Tanggal Akhir :
No Invoice Tanggal buat
Jatuh tempo Member
Id SPK Destination
Contens Amount USD
Status
Print Laporan Invoice
Weight kg
Gambar 4.23 Perancangan Input Laporan Invoice 18. Perancangan Input Laporan Payment
Form input laporan payment dilakukan oleh manager finance apabila sudah mendekati akhir bulan. Berikut perancangan input
data laporan payment.
Tambah Laporan Payment
Tampilkan
Tanggal Awal :
Home Laporan Payment
Tanggal Akhir :
No Invoice No Payment
Jatuh tempo Tagihan USD
Tgl Bayar Denda USD
Total Tagihan USD
Print Laporan Payment
Nama Foto
Gambar 4.24 Perancangan Input Laporan Payment
4.2.3 Perancangan Output