3.2. Perancangan Sistem
3.2.3. Perancangan Antar Muka
50 Primary Key
3.2.2. Perancangan Arsitektur Struktur Menu
Perancangan struktur menu merupakan gambaran jalur pemakaian aplikasi sehingga aplikasi yang dibangun mudah dipahami dan mudah digunakan. Perancangan struktur menu dari Aplikasi Pengarsipan Surat di AKPER Sumedang memakai struktur hirarki. Dapat dilihat pada gambar 3.10.
Menu Utama
Surat Masuk Surat Keluar Perihal Bantuan
Gambar 3.10 Struktur Menu Aplikasi Pengarsipan Surat
3.2.3. Perancangan Antar Muka
Perancagan antarmuka mendeskripsikan rencana tampilan yang akan digunakan pada Aplikasi Pengarsipan Surat di AKPER Sumedang. Perancangan antarmuka pada Aplikasi Pengarsipan Surat di AKPER Sumedang terdiri dari
form dan pesan.
3.2.3.1.Perancangan Form
Perancangan antarmuka form pada Aplikasi Pengarsipan Surat di AKPER Sumedang dapat dilihat pada gambar 3.11 sampai dengan gambar 3.30.
1. Form Login
Pertama kali memasuki program, pengelola surat diharuskan untuk login terlebih dahulu. Tampilan form login dapat dilihat pada gambar 3.11.
No Form: F01
· Klik tombol LOGIN untuk masuk ke F02
· Klik tombol RESET untuk masuk ke F01
Ukuran Form : 300x200 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14 LOGIN X Username Password LOGIN RESET
Gambar 3.11 Tampilan Form Login 2. Form Menu Utama
Jika login benar, selanjutnya akan masuk ke menu utama. Dimana di dalamnya terdapat menu pengolahan surat masuk dan keluar, pengolahan perihal dan bantuan. Tampilan form menu utama dapat dilihat pada gambar 3.12.
54
No Form: F02
· Klik tombol Surat Masuk untuk menuju F03
· Klik tombol Surat Keluar untuk menuju F04
· Klik tombol Perihal untuk menuju F05
· Klik tombol ? untuk menuju F20
· Klik tombol Keluar untuk keluar dari program
Ukuran Form : 450x400 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 16 Surat Masuk Surat Keluar Perihal LOGO Keluar ?
APLIKASI PENGARSIPAN SURAT
X
Gambar 3.12 Tampilan Form Menu Utama
3. Form Pengolahan Surat Masuk
Form ini akan digunakan untuk mengelola surat masuk seperti menambah data, mengedit, dan menghapus. Tampilan form pengolahan surat masuk dapat dilihat pada gambar 3.13.
· Klik tombol Lihat untuk menuju F10
· Klik tombol Cari untuk mencari data surat dan menuju F03
· Klik tombol Buat Laporan atau Laporan Seluruh Data untuk menuju F11
· Klik tombol Tambah untuk menuju F06
· Klik tombol Edit untuk menuju F07
· Klik tombol Hapus untuk menghapus data surat dan menuju F03
· Klik tombol Keluar untuk keluar dan menuju F02
Ukuran Form : 700x500 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14
No Form: F03
Tabel Data Surat Masuk
Preview Surat Lihat
Laporan Seluruh Data Buat Laporan
Tambah Surat Edit Surat Hapus Surat Keluar Pengurutan
Buat Laporan Lihat Gambar Surat
Masukan Nomor Surat
ID Perihal Tanggal Nomor Surat Tujuan Tanggal Surat Dari tanggal Sampai tanggal
PENGOLAHAN SURAT MASUK
X
Cari Nomor Surat Perihal Tujuan Masukan Kata Kunci Pencarian
4. Form Pengolahan Surat Keluar
Form ini akan digunakan untuk mengelola surat keluar seperti menambah data, mengedit, dan menghapus. Tampilan form pengolahan surat keluar dapat dilihat pada gambar 3.14.
· Klik tombol Lihat untuk menuju F16
· Klik tombol Cari untuk mencari data surat dan menuju F04
· Klik tombol Buat Laporan atau Laporan Seluruh Data untuk menuju F17
· Klik tombol Tambah untuk menuju F12
· Klik tombol Edit untuk menuju F13
· Klik tombol Hapus untuk menghapus data surat dan menuju F04
· Klik tombol Keluar untuk keluar dan menuju F02
Ukuran Form : 700x500 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14
No Form: F04
Tabel Data Surat Keluar
Preview Surat Lihat
Laporan Seluruh Data Buat Laporan
Tambah Surat Edit Surat Hapus Surat Keluar Cari
Pengurutan
Buat Laporan Pencarian
Lihat Gambar Surat
Nomor Surat Perihal Tujuan Masukan Kata Kunci Masukan Nomor Surat
ID Perihal Tanggal Nomor Surat Tujuan Tanggal Surat Dari tanggal Sampai tanggal
PENGOLAHAN SURAT KELUAR
X
Gambar 3.14 Tampilan Form Pengolahan Surat Keluar
5. Form Pengolahan Perihal
Form ini akan digunakan untuk mengelola perihal surat. Tampilan form pengolahan perihal dapat dilihat pada gambar 3.15.
56
· Klik tombol Tambah untuk menuju F18
· Klik tombol Edit untuk menuju F19
· Klik tombol Hapus untuk menghapus data perihal dan menuju ke F05
· Klik tombol Keluar untuk keluar dan menuju F02
Ukuran Form : 400x250 piksel Warna Background : Hijau
Jenis Font : Tahoma
Ukuran Font : 14
No Form: F05
Tabel Data Perihal
Tambah Perihal Edit Perihal Hapus Perihal Keluar
PENGOLAHAN PERIHAL
X
Gambar 3.15 Tampilan Form Pengolahan Perihal
6. Form Penambahan Surat Masuk
Form ini akan digunakan untuk menambah data surat masuk. Tampilan form penambahan surat masuk dapat dilihat pada gambar 3.16.
No Form: F06
· Klik tombol Cari Gambar untuk menuju F08
· Klik tombol Scan untuk menuju F09
· Klik tombol Simpan untuk menyimpan data surat ke database dan menuju ke F03
· Klik tombol Batal untuk membatalkan penambahan data surat dan kembali ke F03
Ukuran Form : 400x450 piksel
Warna Background : Hijau
Jenis Font : Tahoma
Ukuran Font : 14
TAMBAH SURAT MASUK
Nomor Surat Tanggal Tanggal Surat Kepada Perihal Referensi Keterangan Gambar Simpan Batal Cari Gambar X Scan Surat
7. Form Pengeditan Surat Masuk
Form ini akan digunakan untuk mengedit data surat masuk. Tampilan form pengeditan surat masuk dapat dilihat pada gambar 3.17.
No Form: F07
· Klik tombol Cari Gambar untuk menuju F08
· Klik tombol Scan untuk menuju F09
· Klik tombol Simpan untuk menyimpan data surat ke database dan menuju ke F03
· Klik tombol Batal untuk membatalkan pengeditan data surat dan kembali ke F03
Ukuran Form : 450x400 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14
EDIT SURAT MASUK
Nomor Surat Tanggal Tanggal Surat Kepada Perihal Referensi Keterangan Gambar Simpan Batal Cari Gambar X Scan Surat
Gambar 3.17 Tampilan Pengeditan Surat Masuk 8. Form Pemilihan Gambar Surat Masuk
Form ini akan digunakan untuk memilih gambar surat masuk untuk dijadikan arsip dari file yang sudah ada. Tampilan form pemilihan gambar surat masuk dapat dilihat pada gambar 3.18.
58
No Form: F08
· Klik tombol Pilih untuk memilih surat dan menuju ke F06 atau F07
· Klik tombol Batal untuk membatalkan pemilihan dan menuju F06 atau F07
Ukuran Form : 600x400 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14 X Lokasi Surat Gambar Surat Masuk1 Gambar Surat Masuk4 Gambar Surat Masuk2 Gambar Surat Masuk3 Gambar Surat Masuk5 Gambar Surat Masuk6 Pilih Batal Navigasi Nama File
Gambar 3.18 Tampilan Form Pemilihan Gambar Surat Masuk
9. Form Scan Surat Masuk
Form ini akan digunakan untuk menscan gambar surat masuk untuk dijadikan arsip. Tampilan form scan surat masuk dapat dilihat pada gambar 3.19.
No Form: F09
· Klik tombol Scan untuk menscan surat dan menuju ke F09
· Klik tombol Simpan untuk menyimpan surat dan menuju F06 atau F07
· Klik tombol Batal untuk membatalkan proses scan dan menuju F06 atau F07
Ukuran Form : Fullscreen (sesuai ukuran layar yang digunakan) Warna Background : Hijau
Jenis Font : Tahoma
Ukuran Font : 14
Simpan Batal
Gambar Surat Masuk
X
Scan
10. Form Gambar Surat Masuk
Form ini akan digunakan untuk melihat gambar surat masuk yang telah diarsipkan. Tampilan form gambar surat masuk dapat dilihat pada gambar 3.20.
No Form: F10
· Klik tombol Print untuk mencetak surat
· Klik tombol Keluar untuk menuju F03
Ukuran Form : Fullscreen (sesuai ukuran layar yang digunakan) Warna Background : Hijau
Jenis Font : Tahoma Ukuran Font : 14
Print Keluar
Gambar Surat Masuk
X
Gambar 3.20 Tampilan Form Gambar Surat Masuk 11. Form Laporan Surat Masuk
Form ini akan digunakan untuk melihat laporan surat masuk yang telah diarsipkan. Tampilan form laporan surat masuk dapat dilihat pada gambar 3.21.
60
No Form: F11
· Klik tombol Print untuk mencetak laporan
· Klik tombol Keluar untuk menuju F03
Ukuran Form : Fullscreen (sesuai ukuran layar yang digunakan) Warna Background : Hijau
Jenis Font : Tahoma
Ukuran Font : 14
Print Keluar
Laporan Surat Masuk
X
Gambar 3.21 Tampilan Form Laporan Surat Masuk 12. Form Penambahan Surat Keluar
Form ini akan digunakan untuk menambah data surat keluar. Tampilan form penambahan surat keluar dapat dilihat pada gambar 3.22.
No Form: F12
· Klik tombol Cari Gambar untuk menuju F15
· Klik tombol Scan untuk menuju F14
· Klik tombol Simpan untuk menyimpan data surat ke database dan menuju ke F04
· Klik tombol Batal untuk membatalkan penambahan data surat dan kembali ke F04
Ukuran Form : 450x400 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14
TAMBAH SURAT KELUAR
Nomor Surat Tanggal Tanggal Surat Kepada Perihal Referensi Keterangan Gambar Simpan Batal Cari Gambar X Scan Surat
13. Form Pengeditan Surat Keluar
Form ini akan digunakan untuk mengedit data surat keluar. Tampilan form pengeditan surat keluar dapat dilihat pada gambar 3.23.
No Form: F13
· Klik tombol Cari Gambar untuk menuju F15
· Klik tombol Scan untuk menuju F14
· Klik tombol Simpan untuk menyimpan data surat ke database dan menuju ke F04
· Klik tombol Batal untuk membatalkan pengeditan data surat dan kembali ke F04
Ukuran Form : 450x400 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14
EDIT SURAT KELUAR
Nomor Surat Tanggal Tanggal Surat Kepada Perihal Referensi Keterangan Gambar Simpan Batal Cari Gambar X Scan Surat
Gambar 3.23 Tampilan Form Pengeditan Surat Keluar
14. Form Pemilihan Gambar Surat Keluar
Form ini akan digunakan untuk memilih gambar surat keluar untuk dijadikan arsip dari file yang sudah ada. Tampilan form pemilihan gambar surat keluar dapat dilihat pada gambar 3.24.
62
No Form: F15
· Klik tombol Pilih untuk memilih surat dan menuju ke F12 atau F13
· Klik tombol Batal untuk membatalkan pemilihan dan menuju F12 atau F13
Ukuran Form : 600x400 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14 X Lokasi Surat Gambar Surat Keluar1 Gambar Surat Keluar4 Gambar Surat Keluar2 Gambar Surat Keluar3 Gambar Surat Keluar5 Gambar Surat Keluar6 Pilih Batal Navigasi Nama File
Gambar 3.24 Tampilan Form Pemilihan Gambar Surat Keluar
15. Form Scan Surat Keluar
Form ini akan digunakan untuk menscan gambar surat keluar untuk dijadikan arsip. Tampilan form scan surat keluar dapat dilihat pada gambar 3.25.
No Form: F14
· Klik tombol Scan untuk menscan surat dan menuju ke F14
· Klik tombol Simpan untuk menyimpan surat dan menuju F12 atau F13
· Klik tombol Batal untuk membatalkan proses scan dan menuju F12 atau F13
Ukuran Form : Fullscreen (sesuai ukuran layar yang digunakan) Warna Background : Hijau
Jenis Font : Tahoma Ukuran Font : 14
Simpan Batal
Gambar Surat Keluar
X Scan
16. Form Gambar Surat Keluar
Form ini akan digunakan untuk melihat gambar surat keluar yang telah diarsipkan. Tampilan form gambar surat keluar dapat dilihat pada gambar 3.26.
No Form: F16
· Klik tombol Print untuk mencetak surat
· Klik tombol Keluar untuk menuju F04
Ukuran Form : Fullscreen (sesuai ukuran layar yang digunakan) Warna Background : Hijau
Jenis Font : Tahoma Ukuran Font : 14
Print Keluar
Gambar Surat Keluar
X
Gambar 3.26 Tampilan Form Gambar Surat Keluar
17. Form Laporan Surat Keluar
Form ini akan digunakan untuk melihat laporan surat keluar yang telah diarsipkan. Tampilan form laporan surat keluar dapat dilihat pada gambar 3.27.
64
No Form: F17
· Klik tombol Print untuk mencetak laporan
· Klik tombol Keluar untuk menuju F04
Ukuran Form : Fullscreen (sesuai ukuran layar yang digunakan) Warna Background : Hijau
Jenis Font : Tahoma Ukuran Font : 14
Print Keluar
Laporan Surat Keluar
X
Gambar 3.27 Tampilan Form Laporan Surat Keluar
18. Form Penambahan Perihal
Form ini akan digunakan untuk menambah data perihal surat. Tampilan form penambahan perihal dapat dilihat pada gambar 3.28.
No Form: F18
* Klik tombol Simpan untuk menyimpan data perihal ke database * Klik tombol Batal untuk membatalkan penambahan data perihal
Ukuran Form : 400x250 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14 TAMBAH PERIHAL Perihal Keterangan Simpan Batal X
19. Form Pengeditan Perihal
Form ini akan digunakan untuk mengedit data perihal surat. Tampilan form pengeditan perihal dapat dilihat pada gambar 3.29.
No Form: F19
* Klik tombol Simpan untuk menyimpan data perihal ke database * Klik tombol Batal untuk membatalkan pengeditan data perihal
Ukuran Form : 400x250 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 14 EDIT PERIHAL Perihal Keterangan Simpan Batal X
Gambar 3.29 Tampilan Form Pengeditan Perihal 20. Form Bantuan
Form ini akan berisi tata cara penggunaan aplikasi. Tampilan form bantuan dapat dilihat pada gambar 3.30.
66
No Form: F20
· Klik tombol Keluar untuk menuju F02
Ukuran Form : 450x400 piksel Warna Background : Hijau Jenis Font : Tahoma Ukuran Font : 16
Isi Bantuan
Keluar
BANTUAN
X
Gambar 3.30 Tampilan Form Bantuan
3.2.3.2. Perancangan Pesan
Perancangan antarmuka pesan pada Aplikasi Pengarsipan Surat di AKPER Sumedang dapat dilihat pada gambar 3.31 sampai dengan gambar 3.40.
1. Perancangan Pesan M01.
Pesan M01 muncul saat pengelola surat memasukan username atau password yang salah. Pesan peringatan dapat dilihat pada gambar 3.31.
Username atau Password salah, silahkan ulangi.
OK
Informasi X
2. Perancangan Pesan M02.
Pesan M02 muncul ketika sedang melakukan proses pengisian atau pengeditan surat, dan pengelola surat membatalkan pengisian. Pesan konfirmasi dapat dilihat pada gambar 3.32.
Pengisian surat dibatalkan?
Ya
Informasi X
Tidak
Gambar 3.32 Tampilan Pesan M02
3. Perancangan Pesan M03.
Pesan M03 muncul dalam menu pengolahan data surat, saat proses penghapusan data. Dengan adanya pesan ini, dapat meminimalisir kesalahan pengelola surat. Pesan konfirmasi dapat dilihat pada gambar 3.33.
Anda yakin surat dengan nomor x akan dihapus?
Ya
Informasi X
Tidak
Gambar 3.33 Tampilan Pesan M03
4. Perancangan Pesan M04.
Pesan M04 muncul dalam menu pengolahan data surat, ketika pengelola surat melakukan proses pencarian. Jika data tidak ditemukan maka akan muncul pesan. Pesan dapat dilihat pada gambar 3.34.
68
Data tidak ditemukan OK
Informasi X
Gambar 3.34 Tampilan Pesan M04
5. Perancangan Pesan M05.
Pesan M05 muncul dalam menu pengolahan data surat, ketika melakukan proses pencarian, jika kata kunci kosong maka akan muncul pesan. Pesan dapat dilihat pada gambar 3.35.
Masukan kata kunci OK
Informasi X
Gambar 3.35 Tampilan Pesan M05
6. Perancangan Pesan M06.
Pesan M06 muncul dalam menu pengolahan data perihal, ketika melakukan proses penambahan, jika nama perihal kosong maka akan muncul pesan. Pesan dapat dilihat pada gambar 3.36.
Perihal tidak boleh kosong OK
Informasi X
7. Perancangan Pesan M07.
Pesan M07 muncul dalam menu pengolahan data perihal, ketika proses penambahan atau pengeditan dibatalkan, maka akan muncul pesan konfirmasi. Pesan konfirmasi dapat dilihat pada gambar 3.37.
Pengisian perihal dibatalkan? Ya
Informasi X
Tidak
Gambar 3.37 Tampilan Pesan M07
8. Perancangan Pesan M08.
Pesan M08 muncul dalam menu pengolahan data perihal, saat proses penghapusan data. Dengan adanya pesan ini, dapat meminimalisir kesalahan pengguna. Pesan konfirmasi dapat dilihat pada gambar 3.38.
Anda yakin perihal x akan dihapus?
Ya
Informasi X
Tidak
Gambar 3.38 Tampilan Pesan M08
9. Perancangan Pesan M09.
Pesan M09 muncul dalam menu pengolahan data surat, tepatnya di penambahan dan pengeditan data surat. Saat nomor surat kosong, maka akan muncul pesan. Pesan konfirmasi dapat dilihat pada gambar 3.39.
70
Nomor surat tidak boleh kosong OK
Informasi X
Gambar 3.39 Tampilan Pesan M09