9 TELEPON_PENGAM BILAN
3.3.3 Rancangan Antarmuka
Rancangan antarmuka pengguna yang akan digunakan dalam membangun aplikasi pengiriman pos akan dijelaskan dibawah ini berdasarkan urutan menu yang ada di aplikasi.
A Halaman Login
Rancangan halaman login saat pertama kali menggunakan aplikasi. Inputan pada halaman login berupa username dan password. Halaman login dapat dilihat pada Gambar 3.17.
Tabel 3.49 Fungsi Obyek Rancangan Halaman Login
No Obyek Tipe Obyek Fungsi
1 Username Textbox Untuk mengisi username pengguna. 2 Password Textbox Untuk mengisi password pengguna.
No Obyek Tipe Obyek Fungsi 3 Login Button Untuk menuju ke halaman
pengolahan master data.
Gambar 3.17 Rancangan Halaman Login
Gambar 3.18 Rancangan Halaman Utama
Tabel 3.50 Fungsi Obyek Rancangan Halaman Utama
No Obyek Tipe Obyek Fungsi
1 Pesanan Terakhir Tabel Menampilakan pesanan terakhir yang dilakukan oleh pelanggan 2 Pengiriman Terakhir Tabel Menampilakan pengiriman
B Halaman Master
Rancangan halaman master bisa melakukan tambah dan ubah data master yang didalamnya terdapat 10 menu master yaitu master data kantor pos, data agen pos, data kurir pos, data propinsi, data kota, data kecamatan, jadwal kerja, jenis pengiriman, pengisian saldo, dan ketentuan tarif pengiriman.
1. Halaman Master Kantor Pos
Gambar 3.19 merupakan rancangan halaman master kantor pos yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Gambar 3.19 Rancangan Halaman Master Kantor Pos
Tabel 3.51 Fungsi Obyek Rancangan Halaman Master Kantor Pos
No Obyek Tipe Obyek Fungsi
1 Nama Kantor Pos
Textbox Untuk memasukkan nama kantor pos 2 Alamat Textbox Untuk memasukkan alamat kantor
pos 3 Nomor telepon
utama
Textbox Untuk memasukkan nomor telepon utama
4 Nomor telepon cadangan
Textbox Untuk memasukkan nomor telepon cadangan
5 Simpan/Edit Button Untuk menyimpan atau mengubah hasil inputan.
6 Table Data Table Untuk menampilkan data jadwal kerja yang sudah tersimpan.
2. Halaman Master Agen Pos
Gambar 3.20 merupakan rancangan halaman master agen pos yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Gambar 3.20 Rancangan Halaman Agen Pos
Tabel 3.52 Fungsi Obyek Rancangan Halaman Agen Pos
No Obyek Tipe Obyek Fungsi
1 Nama agen Textbox Untuk memasukkan nama agen pos 2 Email Textbox Untuk memasukkan email agen 3 KTP Textbox Untuk memasukkan nomor KTP 4 Alamat Textbox Untuk memasukkan alamat agen pos 5 Propinsi Combobox Untuk memilih propinsi
6 Kota Combobox Untuk memilih kota 7 Kecamatan Combobox Untuk memilih kecamatan 8 Nomor telepon
utama
Textbox Untuk memasukkan nomor telepon utama
9 Nomor telepon cadangan
Textbox Untuk memasukkan nomor telepon cadangan
10 Kantor pos penghubung
Combobox Untuk memilih kantor pos penghubung 11 Simpan/Edit Button Untuk menyimpan atau mengubah
hasil inputan.
12 Map Map Untuk menampilkan peta yang
digunakan untuk memasukkan latitude dan longitude
3. Halaman Master Kurir Pos
Gambar 3.21 merupakan rancangan halaman kurir pos yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Gambar 3.21 Rancangan Halaman Master Kurir Pos
Tabel 3.53 Fungsi Obyek Rancangan Halaman Master Kurir Pos
No Obyek Tipe Obyek Fungsi
1 Nama Kurir Textbox Untuk memasukkan nama kurir pos 2 Email Textbox Untuk memasukkan email kurir 3 KTP Textbox Untuk memasukkan nomor KTP
4 Alamat Textbox Untuk memasukkan alamat kurir pos 5 Propinsi Combobox Untuk memilih propinsi
6 Kota Combobox Untuk memilih kota 7 Kecamatan Combobox Untuk memilih kecamatan 8 Nomor telepon
utama
Textbox Untuk memasukkan nomor telepon utama
9 Nomor telepon cadangan
Textbox Untuk memasukkan nomor telepon cadangan
10 Agen pos Combobox Untuk memilih agen pos
11 Simpan/Edit Button Untuk menyimpan atau mengubah hasil inputan.
12 Table Data Table Untuk menampilkan data jadwal kerja yang sudah tersimpan.
4. Halaman Master Propinsi
Gambar 3.22 merupakan rancangan halaman propinsi yang berfungsi untuk menyimpan data baru dan mengubah data propinsi yang sudah ada.
Gambar 3.22 Rancangan Halaman Master Propinsi
Tabel 3.54 Fungsi Obyek Rancangan Halaman Master Propinsi
No Obyek Tipe Obyek Fungsi
1 Nama Propinsi Textbox Untuk memasukkan nama propinsi 2 Simpan/Edit Button Untuk menyimpan atau mengubah
hasil inputan.
3 Table Data Table Untuk menampilkan propinsi yang sudah tersimpan.
5. Halaman Master Kota
Gambar 3.23 merupakan rancangan halaman kota yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Gambar 3.23 Rancangan Halaman Master Kota
Tabel 3.55 Fungsi Obyek Rancangan Halaman Master Kota
No Obyek Tipe Obyek Fungsi
1 Propinsi Combobox Untuk memilih propinsi
2 Nama Kota Textbox Untuk memasukkan nama kota 3 Simpan/Edit Button Untuk menyimpan atau mengubah
No Obyek Tipe Obyek Fungsi
4 Table Data Table Untuk menampilkan data kota yang sudah tersimpan.
6. Halaman Master Kecamatan
Gambar 3.24 merupakan rancangan halaman kecamatan yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Gambar 3.24 Rancangan Halaman Master Kecamatan
Tabel 3.56 Fungsi Obyek Rancangan Halaman Master Kecamatan
No Obyek Tipe Obyek Fungsi
1 Kota Combobox Untuk memilih kota 2 Nama
kecamatan
Textbox Untuk memasukkan nama kecamatan 3 Simpan/Edit Button Untuk menyimpan atau mengubah
hasil inputan.
4 Table Data Table Untuk menampilkan data kecamatan yang sudah tersimpan.
7. Halaman Master Kelurahan
Gambar 3.25 merupakan rancangan halaman kelurahan yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Gambar 3.25 Rancangan Master Halaman Kelurahan
Tabel 3.57 Fungsi Obyek Rancangan Halaman Master Kelurahan
No Obyek Tipe Obyek Fungsi
1 Kecamatan Combobox Untuk memilih kecamatan 2 Kode pos Textbox Untuk memasukkan kode pos 3 Nama
kelurahan
Textbox Untuk memasukkan nama kelurahan 4 Simpan/Edit Button Untuk menyimpan atau mengubah
hasil inputan.
5 Table Data Table Untuk menampilkan data kelurahan yang sudah tersimpan.
8. Halaman Master Ketentuan Tarif Pengiriman
Gambar 3.26 merupakan rancangan halaman master ketentuan tarif pengiriman yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Tabel 3.58 Fungsi Obyek Rancangan Halaman Master Ketentuan Tarif Pengiriman
No Obyek Tipe Obyek Fungsi
1 Periode Date Picker Untuk memilih tanggal. 2 Kota asal Combobox Untuk memilih kota asal. 3 Kota tujuan Combobox Untuk memilih kota tujuan. 4 Buat/Edit Button Untuk menyimpan atau mengubah
hasil inputan.
5 Table Data Table Untuk menampilkan data jadwal kerja yang sudah tersimpan.
9. Halaman Master Jenis Pengiriman
Gambar 3.27 merupakan rancangan halaman master jenis pengiriman yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada
Gambar 3.27 Rancangan Halaman Master Jenis Pengiriman
Tabel 3.59 Fungsi Obyek Rancangan Halaman Master Jenis Pengiriman
No Obyek Tipe Obyek Fungsi
1 Nama jenis pengiriman
textbox Untuk memasukkan nama jenis pengiriman.
2 Tarif textbox Untuk memasukkan tarif jenis pengiriman
3 Buat/Edit Button Untuk menyimpan atau mengubah hasil inputan.
4 Table Data Table Untuk menampilkan data jadwal kerja yang sudah tersimpan.
10. Halaman Master Jadwal Kerja
Gambar 3.28 merupakan rancangan halaman master jadwal kerja yang berfungsi untuk menyimpan data baru dan mengubah data yang sudah ada.
Gambar 3.28 Rancangan Halaman Master Jadwal Kerja
Tabel 3.60 Fungsi Obyek Rancangan Halaman Master Jadwal Kerja
No Obyek Tipe Obyek Fungsi
1 Jadwal kerja Date Picker Untuk memilih tanggal. 2 Jam mulai Time Picker Untuk memilih jam mulai. 3 Jam selesai Time Picker Untuk memilih jam selesai.
4 Buat/Edit Button Untuk menyimpan atau mengubah hasil inputan.
5 Table Data Table Untuk menampilkan data jadwal kerja yang sudah tersimpan.
11. Halaman Master Pengisian Saldo
Gambar 3.29 merupakan rancangan halaman master pengisian saldo berdasarkan nomor transaksi pelanggan.
Gambar 3.29 Rancangan Halaman Master Pengisian Saldo
Tabel 3.61 Fungsi Obyek Rancangan Halaman Master Pengisian Saldo
No Obyek Tipe Obyek Fungsi
1 Nomor Transaksi Textbox Untuk mengecek nomor transaksi pelanggan.
2 Bukti Transaksi Picture Untuk menampilkan bukti transaksi pengisian saldo.
3 Perbarui Button Untuk mengubah saldo pelanggan. 4 Table Data Table Untuk menampilkan data saldo
pelanggan yang sudah tersimpan.
C Halaman Agen Pos
Rancangan halaman pengiriman dilakukan oleh pelanggan, agen, dan kurir. Penggunaan aplikasi agen menggunakan website. Penggunaan aplikasi pada pelanggan dan kurir menggunakan aplikasi mobile.
1. Halaman Beranda Agen
Gambar 3.30 merupakan rancangan halaman beranda pada agen pos setelah melakukan login aplikasi.
Gambar 3.30 Rancangan Halaman Beranda Agen Pos
Tabel 3.62 Fungsi Obyek Rancangan Halaman Beranda Agen Pos
No Obyek Tipe Obyek Fungsi
1 Pesanan Terakhir Data Table Menampilakan pesanan terakhir yang dilakukan oleh pelanggan melalui agen pos
2 Pengiriman Terakhir Data Table Menampilakan pengiriman terakhir yang dilakukan oleh agen
2. Halaman Pengambilan
Gambar 3.31 merupakan rancangan halaman verifikasi pengiriman paket yang dilakukan oleh agen.
Gambar 3.31 Rancangan Halaman Verifikasi Pengambilan
Tabel 3.63 Fungsi Obyek Rancangan Halaman Verifikasi Pengambilan
No Obyek Tipe Obyek Fungsi
1 Invoice Combobox Untuk memilih kurir pos untuk mengambil kiriman pelanggan. 2 Verifikasi Button Untuk memverifikasi bahwa paket
akan diambil.
3. Halaman Kurir Agen
Gambar 3.32 merupakan rancangan halaman daftar kurir yang dimiliki oleh agen pos.
Tabel 3.64 Fungsi Obyek Rancangan Halaman Kurir Agen Pos
No Obyek Tipe Obyek Fungsi
1 Tabel Kurir Data Table Untuk menampilkan daftar kurir yang dimiliki oleh agen pos
D Halaman Kurir Pos 1. Halaman Login
Gambar 3.33 merupakan rancangan halaman login yang dilakukan oleh kurir pos.
Gambar 3.33 Rancangan Halaman Login Kurir
Tabel 3. 65 Fungsi Obyek Rancangan Halaman Login Kurir
No Obyek Tipe Obyek Fungsi
1 Username Textbox Untuk mengisi username pengguna. 2 Password Textbox Untuk mengisi password pengguna. 3 Login Button Untuk menuju ke halaman
pengolahan master data.
2. Halaman Awal Kurir
Gambar 3.34 meruapakan rancangan halaman awal kurir pos setelah melakukan login.
Gambar 3.34 Rancangan Halaman Awal Kurir Pos
Tabel 3 66 Fungsi Obyek Rancangan Halaman Awal Kurir
No Obyek Tipe Obyek Fungsi
1 Transaksi Pengambilan
Button Untuk menuju menu pengambilan. 2 Daftar
Pengambilan
Button Untuk menuju menu daftar
pengambilan yang pernah dilakukan.
3. Halaman Pengambilan
Gambar 3.35 merupakan rancangan halaman pengambilan yang berupa daftar transaksi dan peta pengambilan.
Tabel 3.67 Fungsi Obyek Rancangan Halaman Pengambilan Paket
No Obyek Tipe Obyek Fungsi
1 Transaksi Pengambilan
Listview Untuk menampilkan daftar transaksi pengambilan.
2 Peta
Pengambilan
Map Untuk menampilkan rute pengambilan paket kiriman.
Gambar 3.35 Rancangan Halaman Pengambilan Paket
E Halaman Pelanggan 1. Halaman Daftar
Gambar 3.36 merupakan rancangan halaman daftar menjadi pelanggan aplikasi pengiriman paket online.
Tabel 3.68 Fungsi Obyek Rancangan Halaman Daftar
No Obyek Tipe Obyek Fungsi
1 Nama lengkap Textbox Untuk memasukkan nama lengkap pelanggan
2 No KTP Textbox Untuk memasukkan nomor KTP pelanggan
3 Email Textbox Untuk memasukkan email pelanggan 4 Nomor telepon Textbox Untuk memasukkan nomro telepon
pelanggan
5 Password Textbox Untuk memasukkan password 6 Ulangi
password
Textbox Untuk melakukan pengecekan kesamaan password
7 daftar button Untuk menyimpan data pelanggan kedalam basis data
2. Halaman awal pelanggan
Gambar 3.37 merupakan rancangan halaman awal pelanggan setelah melakukan login
Tabel 3.69 Fungsi Obyek Rancangan Halaman Awal Pelanggan
No Obyek Tipe Obyek Fungsi
1 Resi Textbox Untuk memasukkan pelacakan nomor resi
2 Cek nomor resi Button Untuk menuju halaman detail resi yang telah dimasukkan.
3 Kirim online sekarang
Button Untuk menuju halaman pengiriman secara online.
4 Transaksi pengiriman
Button Untuk menuju halaman daftar pengiriman yang sudah dilakukan 5 Isi saldo Button Untuk menuju halaman pengisian
saldo 6 Cek agen
terdekat
Button Untuk menuju halaman pencarian agen terdekat
3. Halaman Pengiriman Paket
Gambar 3.38 merupakan rancangan halaman pengiriman melalui aplikasi android yang dilakukan oleh pelanggan.
Tabel 3.70 Fungsi Obyek Rancangan Halaman Pengiriman Paket
No Obyek Tipe Obyek Fungsi
1 Lokasi ambil Textbox Untuk memasukkan alamat pengambilan
2 Pilih Button Untuk memilih alamat pengambilan berdasarkan peta
3 Jenis pengiriman
Combobox Untuk memilih jenis pengiriman yang dipakai
4 Nama penerima
Textbox Untuk memasukkan nama penerima paket
5 Nomor telepon Textbox Untuk memasukkan nomor telepon penerima
6 Alamat tujuan Textbox Untuk memasukkan alamat tujuan pengiriman
7 Propinsi Combobox Untuk memilih propinsi tujuan 8 Kota Combobox Untuk memilih kota tujuan 9 Kelurahan Combobox Untuk memilih kode pos dan
kelurahan tujuan
10 lanjutkan Button Untuk menuju halaman selanjutanya
4. Halaman Isi Saldo
Gambar 3.39 merupakan rancangan halaman isi saldo pelanggan.
Gambar 3.39 Rancangan Halaman Isi Saldo Pelanggan
Tabel 3.71 Fungsi Obyek Rancangan Halaman Isi Saldo Pelanggan
No Obyek Tipe Obyek Fungsi
1 Jumlah saldo Combobox Untuk memilih junlah nominal yang ingin dimasukkan kedalam saldo 2 Bank tujuan Combobox Untuk memilih bank tujuan
pengiriman
3 Nama pemilik Textbox Untuk memasukkan nama pemilik pengirim
4 Nomor rekening
Textbox Untuk memasukkan nomor rekening pengirim
5 Proses Button Untuk memproses pengisian saldo 6 Unggah bukti Button Untuk memilih bukti transfer
pengiriman uang.
5. Halaman Pencarian Agen Terdekat
Gambar 3.40 merupakan rancangan halaman untuk mencari agen terdekat dari pelanggan.
Gambar 3.40 Rancangan Halaman Pencarian Agen Terdekat
Tabel 3.72 Fungsi Obyek Rancangan Halaman Pencarian Agen Terdekat
No Obyek Tipe Obyek Fungsi
1 Map Map Untuk menampilkan peta
2 Posisi agen Drop pin Untuk menampilkan posisi agen terdekat.
F Halaman Laporan
Rancangan halaman laporan terdapat 4 laporan yang akan dihasilkan dari aplikasi yaitu laporan paket kiriman, laoran hasil pembayaran, laporan pelanggan aplikasi, dan laporan agen/kurir.
1. Laporan Pengiriman
Gambar 3.41 merupakan rancangan hasil output dari mencetak laporan pengiriman paket berdasarkan pemilihan bulan.
2. Laporan Hasil Pembayaran
Gambar 3.42 merupakan rancangan hasil output dari mencetak laporan hasil pembayaran pengiriman secara online
Gambar 3.42 Rancangan Output Laporan Hasil Pembayaran
3. Laporan Daftar Pelanggan
Gambar 3.43 merupakan rancangan output laporan daftar pelanggan berdasarkan wilayah atau propinsi.
4. Laporan Rekap Pelanggan
Gambar 3.44 merupakan rancangan output laporan rekap pelanggan.
Gambar 3. 44 Rancangan Output Laporan Rekap Pelanggan
5. Laporan Agen Pos
Gambar 3.45 merupakan rancangan output laporan agen yang telah direkap berdasarkan propinsi
6. Laporan Kurir Pos
Gambar 3.46 merupakan rancangan output laporan kurir.
Gambar 3. 46 Rancangan Output Laporan Kurir