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