BAB IV PERANCANGAN SISTEM 4.1 Perancangan Activity Diagram Pada perancangan activity diagram ini didasarkan pada analisis use case yang telah di lakukan penulis pada bab sebelumnya. Berikut merupakan gambaran aktivitas yang terjadi dalam proses analisis use case dari sistem informasi yang akan diusulkan yang dijelaskan pada bentuk activity diagram. 4.1.1 Activity Diagram Login Gambar 4.1 Activity Diagram Login 76
77 4.1.2 Activity Diagram Ubah Profile Gambar 4.2 Activity Diagram Ubah Profile 4.1.3 Activity Diagram Tambah Surat Masuk Gambar 4.3 Activity Diagram Tambah Surat Masuk
78 4.1.4 Activity Edit Surat Masuk Gambar 4.4 Activity Diagram Edit Surat Masuk
79 4.1.5 Activity Diagram Lihat Surat Masuk dan Statusnya Gambar 4.5 Activity Diagram Lihat Surat Masuk dan Statusnya 4.1.6 Activity Diagram Cari Surat Masuk Gambar 4.6 Activity Diagram Cari Surat Masuk
80 4.1.7 Activity Diagram Memberi Disposisi Kepada Pejabat di Bawahnya/ Staf Gambar 4.7 Activity Diagram Memberi Disposisi Kepada Pejabat di Bawahnya/ Staf
81 4.1.8 Activity Diagram Lihat Disposisi Surat Masuk Gambar 4.8 Activity Diagram Lihat Disposisi Surat Masuk
82 4.1.9 Activity Diagram Memberikan Laporan Pelaksanaan Disposisi Gambar 4.9 Activity Diagram Memberi Laporan Pelaksanaan Disposisi
83 4.1.10 Activity Diagram Lihat Grafik Track Surat Masuk Gambar 4.10 Activity Diagram Lihat Grafik Track Surat Masuk 4.1.11 Activity Diagram Lihat Rekapitulasi Surat Masuk Gambar 4.11 Activity Diagram Lihat Rekapitulasi Surat
84 4.1.12 Activity Diagram Tambah Referensi Perintah Disposisi Gambar 4.12 Activity Diagram Tambah Referensi Perintah Disposisi
85 4.1.13 Activity Diagram Edit Referensi Perintah Disposisi Gambar 4.13 Activity Diagram Edit Referensi Perintah Disposisi
86 4.1.14 Activity Diagram Hapus Referensi Perintah Disposisi Gambar 4.14 Activity Diagram Hapus Referensi Perintah Disposisi 4.1.15 Activity Diagram Cari Referensi Perintah Disposisi Gambar 4.15 Activity Diagram Cari Referensi Perintah Disposisi
87 4.1.16 Activity Diagram Tambah User Gambar 4.16 Activity Diagram Tambah User 4.1.17 Activity Diagram Edit User Gambar 4.17 Activity Diagram Edit User
88 4.1.18 Activity Diagram Hapus User Gambar 4.18 Activity Diagram Hapus User 4.1.19 Activity Diagram Cari User Gambar 4.19 Activity Diagram Cari User
89 4.1.20 Activity Diagram Tambah Kontak dan Alamat Instansi Gambar 4.20 Activity Diagram Tambah Kontak dan Alamat Instansi 4.1.21 Activity Diagram Edit Kontak dan Alamat Instansi Gambar 4.21 Activity Diagram Edit Kontak dan Alamat Instansi
90 4.1.22 Activity Diagram Hapus Kontak dan Alamat Instansi Gambar 4.22 Activity Diagram Hapus Kontak dan Alamat Instansi 4.1.23 Activity Diagram Cari Kontak dan Alamat Instansi Gambar 4.23 Activity Diagram Cari Kontak dan Alamat Instansi
91 4.1.24 Activity Diagram Tambah Jabatan Eselon Gambar 4.24 Activity Diagram Tambah Jabatan Eselon
92 4.1.25 Activity Diagram Edit Jabatan Eselon Gambar 4.25 Activity Diagram Edit Jabatan Eselon
93 4.1.26 Activity Diagram Hapus Jabatan Eselon Gambar 4.26 Activity Diagram Hapus Jabatan Eselon 4.1.27 Activity Diagram Cari Jabatan Eselon Gambar 4.27 Activity Diagram Cari Jabatan Eselon
94 4.1.28 Activity Diagram Logout Gambar 4.28 Activity Diagram Logout 4.2 Perancangan Sequence Diagram Sequence diagram menjelaskan pemodelan sistem yang menunjukan interaksi antara objek yang disusun berdasarkan urutan waktu dan juga menggambarkan aliran pengiriman pesan (message) yang terjadi di aplikasi, sebagai bentuk interaksi dengan pengguna. Diagram ini sangat berkaitan dengan use case diagram karena merupakan tahapan proses (apa yang dihasilkan) pada use case. 4.2.1 Sequence Diagram Login Gambar 4.29 Sequence Diagram Login
95 4.2.2 Sequence Diagram Ubah Profile Gambar 4.30 Sequence Diagram Ubah Profile 4.2.3 Sequence Diagram Tambah Surat Masuk Gambar 4.31 Sequence Diagram Tambah Surat Masuk
96 4.2.4 Sequence Diagram Edit Surat Masuk Gambar 4.32 Sequence Edit Surat Masuk 4.2.5 Sequence Diagram Lihat Surat Masuk dan Statusnya Gambar 4.33 Sequence Diagram Lihat Surat Masuk dan Statusnya
97 4.2.6 Sequence Diagram Cari Surat Masuk Gambar 4.34 Sequence Diagram Cari Surat Masuk
98 4.2.7 Sequence Diagram Memberi Disposisi Kepada Pejabat di Bawahnya/ Staf Gambar 4.35 Sequence Diagram Memberi Disposisi Kepada Pejabat di Bawahnya/ Staf
99 4.2.8 Sequence Diagram Lihat Disposisi Surat Masuk Gambar 4.36 Sequence Diagram Lihat Disposisi Surat Masuk
100 4.2.9 Sequence Diagram Memberikan Laporan Pelaksanaan Disposisi Gambar 4.37 Sequence Diagram Memberi Laporan Pelaksanaan Disposisi
101 4.2.10 Sequence Diagram Lihat Grafik Track Surat Masuk Gambar 4.38 Sequence Diagram Lihat Grafik Track Surat Masuk 4.2.11 Sequence Diagram Lihat Rekapitulasi Surat Masuk Gambar 4.39 Sequence Diagram Lihat Rekapitulasi Surat Masuk
102 4.2.12 Sequence Diagram Tambah Referensi Perintah Disposisi Gambar 4.40 Sequence Diagram Tambah Referensi Perintah Disposisi 4.2.13 Sequence Diagram Edit Referensi Perintah Disposisi Gambar 4.41 Sequence Diagram Edit Referensi Perintah Disposisi
103 4.2.14 Sequence Diagram Hapus Referensi Perintah Disposisi Gambar 4.42 Sequence Diagram Hapus Referensi Perintah Disposisi 4.2.15 Sequence Diagram Cari Referensi Perintah Disposisi Gambar 4.43 Sequence Diagram Cari Referensi Perintah Disposisi
104 4.2.16 Sequence Diagram Tambah User Gambar 4.44 Sequence Diagram Tambah User 4.2.17 Sequence Diagram Edit User Gambar 4.45 Sequence Diagram Edit User
105 4.2.18 Sequence Diagram Hapus User Gambar 4.46 Sequence Diagram Hapus User 4.2.19 Sequence Diagram Cari User Gambar 4.47 Sequence Diagram Cari User
106 4.2.20 Sequence Diagram Tambah Kontak dan Alamat Instansi Gambar 4.48 Sequence Diagram Tambah Kontak dan Alamat Instansi 4.2.21 Sequence Diagram Edit Kontak dan Alamat Instansi Gambar 4.49 Sequence Diagram Edit Kontak dan Alamat Instansi
107 4.2.22 Sequence Diagram Hapus Kontak dan Alamat Instansi Gambar 4.50 Sequence Diagram Hapus Kontak dan Alamat Instansi 4.2.23 Sequence Diagram Cari Kontak dan Alamat Instansi Gambar 4.51 Sequence Diagram Cari Kontak dan Alamat Instansi
108 4.2.24 Sequence Diagram Tambah Jabatan Eselon Gambar 4.52 Sequence Diagram Tambah Jabatan Eselon 4.2.25 Sequence Diagram Edit Jabatan Eselon Gambar 4.53 Sequence Diagram Edit Jabatan Eselon
109 4.2.26 Sequence Diagram Hapus Jabatan Eselon Gambar 4.54 Sequence Diagram Hapus Jabatan Eselon 4.2.27 Sequence Diagram Cari Jabatan Eselon Gambar 4.55 Sequence Diagram Cari Jabatan Eselon
110 4.2.28 Sequence Diagram Logout Gambar 4.56 Sequence Diagram Logout 4.3 Perancangan Class Diagram Class diagram menggambarkan struktur sistem dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem. Kelas memiliki apa yang disebut atribut dan metode atau operasi. Berikut merupakan rancangan class diagram pada sistem informasi tata kelola surat dinas yang akan diusulkan.
111 Gambar 4.57 Rancangan Class Diagram 4.4 Perancangan Struktur Tabel Berikut merupakan rancangan struktur tabel di dalamnya terdiri dari field data maupun struktur data. Perancangan struktur tabel ini meliputi penggunaan tabel-tabel yang membangun database sistem. Database yang akan di rancang dalam sistem ini memiliki 7 (tujuh) tabel. Berikut adalah penjelasan dari ke tujuh tabel tersebut.
112 4.4.1 Tabel data_user Tabel data_user merupakan tabel untuk menyimpan data pengguna sistem. Terdapat 11 (sebelas) field yang ada dalam tabel data_user. Tabel 4.1 Tabel data_user No Field Name Data Type Size Key Description 1 nip Varchar 18 Primary Nomor Induk Pegawai 2 username Varchar 30 Username pengguna 3 password Varchar 30 Password pengguna 4 level_akses Varchar 2 Level untuk hak akses 5 id_jabatan Varchar 10 Foreign Kode jabatan 6 nama_jabatan Varchar 100 Nama jabatan 7 nama_user Varchar 50 Nama pengguna 8 tgl_lhr Date Tanggal lahir pengguna 9 tempat_lhr Varchar 50 Tempat lahir pengguna 10 e-mail Varchar 50 Email pengguna 11 nomor_hp Varchar 14 Nomor handphone pengguna 4.4.2 Tabel data_surat_masuk Tabel data_surat_masuk merupakan tabel untuk menyimpan data surat masuk. Terdapat 15 (lima belas) field yang ada dalam tabel data_surat_masuk. Tabel 4.2 Tabel data_surat_masuk No Field Name Data Type Size Key Description 1 nomor_surat_masuk Varchar 30 Primary Nomor surat masuk 2 jenis_surat_masuk Varchar 50 Jenis surat masuk 3 tanggal_surat_masuk Date Tanggal surat masuk 4 tenggat_surat_masuk Date Tenggat waktu surat masuk 5 pengirim_surat_masuk Varchar 50 Pengirim surat masuk 6 id_jabatan Varchar 10 Foreign Id jabatan tujuan surat masuk 7 nama_unitkerja Varchar 50 Unit kerja tujuan surat masuk 8 sifat_surat Varchar 10 Sifat surat masuk 9 hal_surat Varchar 30 Topik hal surat masuk 10 isi_subjek_hal Varchar 200 Isi subjek hal surat masuk 11 isi_ringkas_surat_masuk Varchar 500 Isi ringkasan surat masuk 12 status_surat_masuk Varchar 100 Status surat masuk
113 13 lampiran_surat_masuk Varchar 100 Lampiran surat masuk dalam bentuk scan surat pdf 14 kode_lokasisurat Varchar 20 Kode lokasi penyimpanan surat masuk 15 nama_lokasisurat Varchar 50 Nama lokasi fisik surat masuk disimpan 4.4.3 Tabel jabatan Tabel jabatan merupakan tabel untuk menyimpan data jabatan. Terdapat 8 (delapan) field yang ada dalam tabel jabatan. Tabel 4.3 Tabel jabatan No Field Name Data Type Size Key Description 1 id_jabatan Varchar 10 Primary Id jabatan 2 nama_jabatan Varchar 100 Nama jabatan 3 singkatan_jabatan Varchar 50 Singkatan jabatan 4 nama_unitkerja Varchar 100 Nama unit kerja 5 singkatan_unitkerja Varchar 50 Singkatan unit kerja 6 lingkup_unitkerja Varchar 50 Lingkup unit kerja 7 tingkat_eselon Varchar 2 Tingkatan eselon 8 nama_tingkat_eselon Varchar 10 Nama tingkatan eselon 4.4.4 Tabel data_kontak_alamat Tabel data_kontak_alamat merupakan tabel untuk menyimpan data pengirim surat berupa data kontak pengirim surat dan alamat pengirim surat. Terdapat 8 (delapan) field yang ada dalam tabel data_kontak_alamat. Tabel 4.4 Tabel data_kontak_alamat No Field Name Data Type Size Key Description 1 id_kontak Varchar 30 Primary Id kontak 2 nama_kontak Varchar 50 Nama kontak 3 email_kontak Varchar 50 Email kontak 4 intansi_kontak Varchar 50 Instansi kontak 5 jabatan_kontak Varchar 50 Jabatan kontak 6 alamat_kontak Varchar 100 Alamat kontak 7 telepon_kontak Varchar 15 Telepon kontak 8 fax_kontak Varchar 15 Fax kontak
114 4.4.5 Tabel data_disposisi Tabel data_disposisi merupakan tabel untuk menyimpan data disposisi surat masuk. Terdapat 11 (sebelas) field yang ada dalam tabel data_disposisi. Tabel 4.5 Tabel data_disposisi No Field Name Data Type Size Key Description 1 id_disposisi Varchar 30 Primary Id disposisi 2 nomor_surat_masuk Varchar 30 Foreign Nomor surat masuk 3 tgl_disposisi Date Tanggal disposisi dikirim 4 tenggat_waktu_disposisi Date Tenggat waktu disposisi 5 id_penerima_diposisi Varchar 18 Id penerima disposisi 6 nama_penerima_disposisi Varchar 50 Nama penerima disposisi 7 id_perintah_diposisi Varchar 30 Foreign Id perintah disposisi 8 sifat_disposisi Varchar 10 Sifat disposisi 9 catatan_instruksi_disposisi Varchar 200 Instruksi Disposisi 10 id_pemberi_diposisi Varchar 30 Id pemberi disposisi 11 nama_pemberi_disposisi Varchar 50 Nama pemberi disposisi 4.4.6 Tabel disposisi_laporan Tabel data_surat_masuk merupakan tabel untuk menyimpan data laporan disposisi atas pelaksaan surat masuk. Terdapat 4 (empat) field yang ada dalam tabel disposisi_laporan. Tabel 4.6 Tabel disposisi_laporan No Field Name Data Type Size Key Description 1 id_laporan Varchar 30 Primary Id laporan 2 id_disposisi Varchar 30 Foreign Id disposisi 3 isi_laporan_disposisi Varchar 200 Isi ringkas laporan 4 lampiran_lap_disposisi Varchar 100 Lampiran laporan disposisi 4.4.7 Tabel perintah_disposisi Tabel perintah_disposisi merupakan tabel untuk menyimpan data perintah disposisi. Terdapat 2 (dua) field yang ada dalam tabel perintah_disposisi. Tabel 4.7 Tabel perintah_disposisi No Field Name Data Type Size Key Description 1 id_perintah_diposisi Varchar 30 Primary Id perintah disposisi 2 nama_perintah_diposisi Varchar 50 Nama perintah disposisi
115 4.5 Rancangan Struktur Menu dan Layar Antarmuka Berikut merupakan rancangan struktur menu dan rancangan layar antarmuka sistem informasi tata kelola surat dinas yang dibahas pada tugas akhir ini. 4.5.1 Rancangan Struktur Menu Rancangan menu pada sistem ini akan dibagi menjadi 5 (lima) menurut hak akses yaitu menu administrator, menu operator, menu manajemen, menu sekretaris dan menu staf. 4.5.1.1 Rancangan Struktur Menu Admin Gambar 4.58 Rancangan Struktur Menu Administrator 4.5.1.2 Rancangan Struktur Menu Operator Gambar 4.59 Rancangan Struktur Menu Operator
116 4.5.1.3 Rancangan Struktur Menu Manajemen Gambar 4.60 Rancangan Struktur Menu Manajemen 4.5.1.4 Rancangan Struktur Menu Sekretaris Gambar 4.61 Rancangan Struktur Menu Sekretaris 4.5.1.5 Rancangan Struktur Menu Staf Gambar 4.62 Rancangan Struktur Menu Staf
117 4.5.2 Rancangan Layar Rancangan layar antarmuka bertujuan untuk menampilkan informasi kepada pengguna sistem, selain itu juga digunakan untuk memasukan data atau informasi ke dalam sistem yang akan diusulkan. Berikut merupakan rancangan layar yang dibahas pada tugas akhir ini. 4.5.2.1 Rancangan Layar Halaman Login Gambar 4.63 Rancangan Layar Halaman Login 4.5.2.2 Rancangan Layar Halaman Utama Gambar 4.64 Rancangan Layar Halaman Utama Administrator
118 4.5.2.3 Rancangan Layar Halaman Ubah Profile Gambar 4.65 Rancangan Layar Halaman Ubah Profile 4.5.2.4 Rancangan Layar Halaman Tambah Surat Masuk Gambar 4.66 Rancangan Layar Tambah Surat Masuk
119 4.5.2.5 Rancangan Layar Halaman Cari Surat Masuk Gambar 4.67 Rancangan Layar Cari Surat Masuk 4.5.2.6 Rancangan Layar Halaman Lihat Surat Masuk dan Statusnya Gambar 4.68 Rancangan Layar Halaman Lihat Surat Masuk dan Statusnya
120 4.5.2.7 Rancangan Layar Halaman Detail Surat Gambar 4.69 Rancangan Layar Halaman Detail Surat 4.5.2.8 Rancangan Layar Halaman Edit Surat Masuk Gambar 4.70 Rancangan Layar Halaman Edit Surat Masuk
121 4.5.2.9 Rancangan Layar Halaman Tambah Disposisi Gambar 4.71 Rancangan Layar Halaman Tambah Disposisi
122 4.5.2.10 Rancangan Layar Halaman Lihat Disposisi Surat Masuk Gambar 4.72 Rancangan Layar Halaman Lihat Disposisi Surat Masuk 4.5.2.11 Rancangan Layar Halaman Detail Disposisi Gambar 4.73 Rancangan Layar Halaman Detail Disposisi
123 4.5.2.12 Rancangan Layar Halaman Laporan Pelaksanaan Disposisi Gambar 4.74 Rancangan Layar Halaman Laporan Pelaksanaan Disposisi
124 4.5.2.13 Rancangan Layar Halaman Grafik Track Surat Masuk Gambar 4.75 Rancangan Layar Halaman Grafik Track Surat Masuk 4.5.2.14 Rancangan Layar Grafik Track Surat Masuk Gambar 4.76 Rancangan Layar Grafik Track Surat Masuk
125 4.5.2.15 Rancangan Layar Halaman Rekapitulasi Surat Masuk Gambar 4.77 Rancangan Layar Halaman Rekapitulasi Surat Masuk 4.5.2.16 Rancangan Layar Tampilan HTML Rekapitulasi Surat Masuk Gambar 4.78 Rancangan Layar Tampilan HTML Rekapitulasi Surat Masuk
126 4.5.2.17 Rancangan Layar Halaman Daftar Perintah Disposisi Gambar 4.79 Rancangan Layar Halaman Daftar Perintah Disposisi 4.5.2.18 Rancangan Layar Halaman Tambah Perintah Disposisi Gambar 4.80 Rancangan Layar Halaman Tambah Perintah Disposisi
127 4.5.2.19 Rancangan Layar Halaman Daftar User Gambar 4.81 Rancangan Layar Halaman Daftar User 4.5.2.20 Rancangan Layar Halaman Tambah User Gambar 4.82 Rancangan Layar Halaman Tambah User
128 4.5.2.21 Rancangan Layar Halaman Daftar Kontak dan Alamat Instansi Gambar 4.83 Rancangan Layar Halaman Daftar Kontak dan Instansi 4.5.2.22 Rancangan Layar Halaman Tambah Kontak dan Alamat Instansi Gambar 4.84 Rancangan Layar Halaman Daftar Kontak dan Alamat Instansi
129 4.5.2.23 Rancangan Layar Halaman Daftar Jabatan Eselon Gambar 4.85 Rancangan Layar Halaman Daftar Jabatan Eselon 4.5.2.24 Rancangan Layar Halaman Tambah Jabatan Eselon Gambar 4.86 Rancangan Layar Halaman Tambah Jabatan Eselon
130 4.5.2.25 Rancangan Layar Kotak Dialog Konfirmasi Hapus Gambar 4.87 Rancangan Layar Kotak Dialog Konfirmasi Hapus 4.5.2.26 Rancangan Layar Kotak Dialog Konfirmasi Logout Gambar 4.88 Rancangan Layar Kotak Dialog Konfirmasi Logout