BAB IV PERANCANGAN
4.1
Analisis Sistem Analisis merupakan tahapan untuk mengidentifikasi permasalahan serta proses yang terjadi dalam membangun sebuah system. Analisis dilakukan terhadap kebutuhan website yang akan dibangun , agar permanfaatan website yang digunakan memperoleh hasil yang optimal. Kemudian dilakukan analisis terhadap pengguna website, yang digunakan sebagai pembagian otoritas pengunaan website.
Gambaran sistem yang baik akan memudahkan bagi perancang untuk membuat
alur
bagi
pengguna.
Gambaran
sistem,
secara
garis
besar
mendeskripsikan hal – hal dan fitur – fitur yang diperuntukan bagi aktor.
Untuk sistem penyerahan surat masuk yang ada di PT. Pegadaian (Persero) Kanwil X Bandung, terdiri dari sejumlah peket yang datang dari anak perusahaan atau cabang dengan pangajuan yang berbeda-beda.
System yang digunakan masih manual atau tulis tangan yang akan melibatkan penundaan surat yang dating dengan waktu yang tidak sesuai.
Admin adalah yang mengatur semua konten dinamis untuk web aplikasi ini. Hal – hal yang dilakukan oleh admin adalah login, logout, mengatur log, mengatur surat, mengatur anak perusahaan, mengatur database, mengatur divisi.
4.1.1. Penjelasan Singkat Isi Menu Berikut mengenai menu di WEB Surat Masuk PT. Pegadaian (Persero) Kanwil X Bandung
1. Divisi Logistik Login
-> berisi form untuk login
Home
-> berisi bagian utama halaman website
57
58
Catat Surat Masuk -> untuk menginput data surat ke divisi lain Catat Surat Ekspedisi -> untuk menginputkan data surat otorisasi Cari Surat -> untuk mencari surat yang sudah massuk Logout
-> keluar dari form divisi
2. Divisi Umum Login
-> berisi form untuk login
Home
-> berisi bagian utama halaman website
Surat Persetujuan -> untuk proses persetujuan kedatangan surat Logout
-> keluar dari form divisi
3. Admin Login
-> berisi form untuk login admin
Anak Cabang -> untuk mengedit, hapus, dan tambah data anak cabang Divisi -> untuk lihat, mengedit, hapus, tambah data login divisi Backup -> untuk backup data anak cabang, divisi dan history data perusahaan Logout -> keluar dari form admin
4.1.2. Analisis kebutuhan Analisis kebutuhan menjelaskan kebutuhan-kebutuhan yang akan diperlukan pada aplikasi yang di bangun. Adapun kebutuhan kebutahn tersebut: 1. Divisi Logistik Divisi Logistik yang mengatur surat masuk dari cabang.
2. Divisi Umum Divisi Umum yang hanya menyetujui surat masuk dari logistik.
3. Admin Administrator berfungsi untuk mengecek apakah ada data yang akan dapat menambah, mengedit, dan mengahapus data yang ada.
59
4.1.3. Analiss Fasilitas Website yang dirancang memiliki spesifikasi fasilitas berbeda menurut kategori menu pengguna. Berikut adalah spesifikasinya; 1. Divisi Logistik a. Beranda Adalah fasilitas utama yang akan menampilkan halaman utama website .
b. Catat Surat Masuk Adalah faslitas yang akan memproses surat masuk untuk di tindak lanjut ke divisi yang dituju.
c. Catat Surat Ekspedisi Adalah fasilitas yang dimana surat khusus yang akan di tindak lanjut oleh jenis surat ekspedisi.
d. Cari Surat Adalah fasilitas yang berisi tentang pengecekan surat yang telah di tindak lanjuti oleh divisi lain.
e. Cek Persetujuan SPOA dan ND Adalah fasilitas yang berisi tentang pengecekan surat khusus tentang tindak lanjut oleh divisi yang khusus.
f. Login Ini merupakan fasiltas yang sangat penting, karena setiap divisi dan admin yang sudah terdaftar di web bisa melakukan proses selanjutnya.
60
2. Divisi Umum a. Beranda Adalah fasilitas utama yang akan menampilkan halaman utama website .
b. Persetujuan Surat Masuk Adalah faslitas yang akan memproses tentang surat masuk untuk di tindak lanjut dengan setuju atau tidak nya surat tujuan yang di maksud.
c. Login Ini merupakan fasiltas yang sangat penting, karena setiap divisi dan admin yang sudah terdaftar di web bisa melakukan proses selanjutnya.
3. Admin a. Beranda Adalah fasilitas utama yang akan menampilkan halaman utama website .
b. Anak Cabang Adalah fasilitas yang digunakan untuk menampilkan, tambah, mengubah, hapus data cabang.
c. Divisi Adalah fasilitas yang digunakan untuk menampilkan, tambah, mengubah, hapus data divisi.
d. Backup Adalah fasilitas yang digunakan untuk backup data anak cabang, divisi dan history.
61
d. Login Ini merupakan fasiltas yang sangat penting, karena setiap divisi dan admin yang sudah terdaftar di web bisa melakukan proses selanjutnya.
4.2
Perancangan SIstem 4.2.1
Use Case Diagram Use Case Diagram menjelaskan manfaat system jika dilihat menurut pandangan orang yang terdapat diluar system. Diagram ini menunjukkan fungsionalitas suatu system dan bagaimana system berinteraksi dengan dunia luar.
Gambar 4.1 User Case Diagram
62
Gambar 4.2 Use Case Diagram Admin login Tabel 4.1 Deskripsi User Case Admin Login Basic
Login Admin
Usecase
Login Admin
Precondition
Masuk ke halaman khusus login
Successful Post Condition
Masuk ke halaman khusus admin
Failed Post Condition
Tampil Pesan salah id admin/ kata kunci
Primary, Secondary Actors
Admin
Flow of Events
Step
Actions
1.
Masuk ke halaman khusus admin
2.
Input id, user dan pass
3.
Submit
4.
Masuk ke halaman menu utama admin
Gambar 4.3 Use Case Diagram Admin Mengatur Anak Cabang Tabel 4.2 Deskripsi Use Case Admin Mengatur Anak Cabang Basic
Admin mengatur data anak cabang
Usecase
Admin mengatur data anak cabang
Precondition
Klik menu ana cabang pada halaman utama
Successful Post Condition
Masuk ke bagian halaman kelola anak cabang
Failed Post Condition
--
Primary, Secondary Actors
Admin
63
Flow of Events
Step
Actions
1.
Pada halaman utama pilih menu anak cabang
2.
Kelola anak cabang dengan memilih menu tambah, edit, dan hapus
Gambar 4.4 Use Case Diagram Diagram Admin Mengatur Divisi Kantor Tabel 4.3 Deskripsi Use Case Admin Mengatur Divisi Kantor Basic
Admin mengatur divisi kantor
Usecase
Admin mengatur divisi kantor
Precondition
Klik menu divisi pada halaman menu utama admin
Successful Post Condition
Masuk ke bagian halaman kelola divisi
Failed Post Condition
--
Primary, Secondary Actors
Admin
Flow of Events
Step
Actions
1.
Pada halamana menu utama , pilih menu divisi
2.
Kelola divisi dengan memilih menu tambah, edit dan hapus
64
Gambar 4.5 Use Case Diagram Admin Membackup Data Kantor Tabel 4.4 Deskripsi Use Case Admin Membackup Data Kantor Basic
Admin membackup data kantor
Usecase
Admin membackup data kantor
Precondition
Klik menu backup pada halaman menu utama admin
Successful Post Condition
Masuk ke bagian jenis backup
Failed Post Condition
--
Primary, Secondary Actors
Admin
Flow of Events
Step
Actions
1.
Pada halamana menu utama, pilih menu backup
2.
Pilih jenis data yang akan di backup
3.
Klik data yang akan di backup, secara otomatis data ter download dengan file excel
Gambar 4.6 Use Case Diagram Divisi Logistik Login Tabel 4.5 Deskripsi Use Case Divisi Logistik Login Basic
Login divisi loggistik
Usecase
Login divisi logistik
Precondition
Masuk ke halaman login divisi logistik
Successful Post Condition
Masuk ke halaman login divisi logistik
Failed Post Condition
Tampil Pesan salah id divisi / kata kunci
65
Primary, Secondary Actors
Divisi logistik
Flow of Events
Step
Actions
1.
Masuk Ke halaman login divisi logistik
2.
Input divisi, user dan pass divisi
3.
Submit
4.
Masuk ke halaman menu utama divisi logistik
Gambar 4.7 Use Case Diagram Divisi Logistik Catat Surat Masuk Tabel 4.6 Deskripsi Use Case Divisi Logistik Mencatat Surat Msuk Basic
Divisi logistik catat surat masuk
Usecase
Divisi logistic catat surat masuk
Precondition
Klik menu catat surat masuk pada halaman menu utama divisi logistik
Successful Post Condition
Masuk ke bagian halaman catat surat masuk
Failed Post Condition
--
Primary, Secondary Actors
Divisi logistik
Flow of Events
Step
Actions
1.
Pada halamana menu utama, pilih menu catat surat masuk
2.
Inputkan no kepala surat, cabang, prihal, divisi tujuan
3.
Submit
66
Gambar 4.8 Use Case Diagram Divisi Logistik Catat Surat Ekspedisi Tabel 4.7 Deskripsi Use Case Divisi Logistik Catat Surat Ekspedisi Basic
Divisi logistik catat surat ekspedisi
Usecase
Divisi logistik catat surat ekspedisi
Precondition
Klik menu catat surat ekspedisi pada halaman menu utama divisi logistik
Successful Post Condition
Masuk ke bagian halaman catat surat ekspedisi
Failed Post Condition
--
Primary, Secondary Actors
Divisi logistik
Flow of Events
Step
Actions
1.
Pada halamana menu utama, pilih menu catat surat ekspedisi dan pilih jenis surat
2.
Inputkan no kepala surat, prihal, biaya
3.
Submit
Gambar 4.9 Use Case Diagram Divisi Logistik Ceari Surat Masuk Tabel 4.8 Deskripsi Use Case Divisi Logstik Cari Surat Masuk Basic
Divisi logistik cari surat masuk
Usecase
Divisi logistik cari surat masuk
Precondition
Klik menu cari surat masuk pada halaman menu utama divisi logistic
67
Successful Post Condition
Masuk ke bagian halaman cari surat masuk
Failed Post Condition
--
Primary, Secondary Actors
Divisi logistik
Flow of Events
Step
Actions
1.
Pada halamana menu utama, pilih menu cari surat
2.
Inputkan no kepala surat, dan cabang
3.
Submit
Gambar 4.10 Use Case Diagram Divisi Logistik Cek Surat Ekspedisi Tabel 4.9 Deskripsi Use Case Cek Surat Ekspedisi Basic
Divisi logistik cek surat ekspedisi
Usecase
Divisi logistik cek surat ekspedisi
Precondition
Klik menu cek persetujun SPOA / ND pada halaman menu utama divisi logistic
Successful Post Condition
Masuk ke bagian halaman cek surat ekspedisi
Failed Post Condition
--
Primary, Secondary Actors
Divisi logistik
Flow of Events
Step
Actions
1.
Pada halamana menu utama, pilih menu cek persetujuan SPOA/ND
2.
Inputkan no kepala surat, dan divisi
3.
Submit
68
Gambar 4.11 Use Case Diagram Divisi Umum Login Tabel 4.10 Deskripsi Use Case Divisi Umum Login Basic
Login divisi umum
Usecase
Login divisi umum
Precondition
Masuk ke halaman login divisi umum
Successful Post Condition
Masuk ke halaman login divisi umum
Failed Post Condition
Tampil Pesan salah id divisi / kata kunci
Primary, Secondary Actors
Divisi umum
Flow of Events
Step
Actions
1.
Masuk Ke halaman login divisi umum
2.
Input divisi, user dan pass divisi
3.
Submit
Gambar 4.12 Use Case Diagram Divisi Umum Cek Persetujuan Surat Masuk Tabel 4.11 Deskripsi Use Case Divisi Umum Cek Persetujuan Surat Masuk Basic
Divisi umum cek persetujuan surat masuk
Usecase
Divisi logistik cek persetujuan surat masuk
Precondition
Klik menu persetujuan surat masuk pada halaman menu utama divisi umum
Successful Post Condition
Masuk ke bagian halaman persetujuan surat masuk
Failed Post Condition
--
Primary, Secondary Actors
Divisi umum
69
Flow of Events
Step
Actions
1.
Pada halamana menu utama, pilih menu persetujuan surat masuk
2.
Pilih aksi benar atau salah dengan surat lampiran
4.2.2
Activity Diagram website
admin
masuk ke website
form login
database
ambil data admin yang sama dengan data form login
mengisi divisi, user dan pass
submit form login
cek validasi
cek validasi
cek validasi
menampilkan pesan login gagal
masuk ke halaman utama admin
Gambar 4.13 Activity Diagram Login Admin
pembaharuan data
70
website
admin
database
masuk ke anak cabang
ambil data anak cabang menampilkan data anak cabang
view data anak cabang
pembaharuan data anak cabang
add, edit, delete
Gambar 4.14 Activity Diagram Admin Mengatur Anak Cabang
website
admin
database
masuk ke divisi
ambil data divisi menampilkan data divisi
view data divisi
pembaharuan data divisi
add, edit, delete
Gambar 4.15 Activity Diagram Admin Mengatur Divisi
admin
masuk ke backup
website
database
menampilkan pilihan backup
backup data anak cabang
ambil data pilihan backup
backup data divisi backup data history
Gambar 4.15 Activity Diagram Admin Membackup Data
71
website
divisi logistik
masuk ke website
database
form login
ambil data divisi logistik yang sama dengan data form login
mengisi divisi, user dan pass
submit form login
cek validasi
cek validasi
cek validasi
menampilkan pesan login gagal
masuk ke halaman utama divisi logistik
pembaharuan data
view surat
edit surat
Gambar 4.16 Activity Diagram Divisi Logistik Login
website
divisi logistik
masuk ke catat surat masuk
database
menampilkan form catat surat masuk
mengisi no, cabang, prihal, divisi
perubahan data surat masuk
submit form input
cek validasi cek validasi
cek validasi
menampilkan form catat surat masuk
Gambar 4.17 Activity Diagram Divisi Logistik Mencatat Surat Masuk
72
website
divisi logistik
masuk ke catat surat ekspedisi
database
menampilkan pilihan suart ekspedisi
Surat SPOA
ambil data pilihan surat ekspedisi
Surat ND mengisi no, perihal, biaya, divisi tujuan
menampilkan form surat ekspedisi
submit form input
cek validasi
perubahan data surat ekspedisi
cek validasi
cek validasi
menampilkan form surat ekspedisi
Gambar 4.18 Activity Diagram Divisi Logistik Mencatat Ekspedisi
website
divisi logistik
masuk ke cari catat surat
database
menampilkan form cari surat masuk
mengisi no, cabang
submit form cari
cek validasi
ambil data surat masuk
cek validasi
cek validasi
menampilkan surat masuk
Gambar 4.19 Activity Diagram Divisi Logistik Cari Surat Masuk
73
website
divisi logistik
masuk ke cek persetujuan SPOA dan ND
database
menampilkan form surat ekspedisi
mengisi no, divisi
submit form cari
cek validasi
ambil data surat ekspedisi
cek validasi
cek validasi
menampilkan surat ekspedisi
Gambar 4.20 Activity Diagram Divisi Logistik Cek Persetujuan SPOA dan ND
website
divisi umum
masuk ke website
database
form login
ambil data divisi umum yang sama dengan data form login
mengisi divisi, user dan pass
submit form login
cek validasi
cek validasi
cek validasi
menampilkan pesan login gagal
masuk ke halaman utama divisi umum
pembaharuan data divisi umum
view surat masuk
edit surat masuk
Gambar 4.21 Activity Diagram Divisi Umum Login
74
website
divisi umum
database
masuk ke persetujuan surat masuk
ambil data surat masuk
menampilkan data surat masuk
perubahan surat masuk
view data surat masuk setuju batal
Gambar 4.22 Activity Diagram Divisi Umum Persetujuan Surat Masuk
75
4.2.3
Sequencial Diagram admin
website
database
1 : login admin()
2 : isi divisi, user dan pass() 3 : periksa ketersediaan data admin()
4 : data admin tidak ada()
5 : isi divisi, user dan pass lalu submit form() 6 : data admin ada()
7 : menampilkan halaman utama admin()
8 : mengatur anak cabang()
9 : mengatur divisi kantor()
10 : backup data()
11 : perubahan data di ismpan()
12 : proses selesai()
Gambar 4.23 Sequencial Diagram Admin Login
76
admin
website
database
1 : masuk ke anak cabang()
2 : ambil data anak cabang()
3 : menampilkan data anak cabang()
4 : add() 5 : edit() 6 : delete() 7 : perubahan data anak cabang disimpan()
8 : proses selesai()
Gambar 4.24 Sequencial Diagram Admin Mengatur Anak Cabang
77
admin
website
database
1 : masuk ke divisi()
2 : ambil data divisi()
3 : menampilkan data divisi()
4 : add() 5 : edit() 6 : delete() 7 : perubahan data divisi()
8 : proses selesai()
Gambar 4.25 Sequencial Diagram Admin Mengatur Divisi
78
admin
website
database
1 : masuk ke backup()
2 : backup data anak cabang() 3 : backup data divisi() 4 : backup data history() 5 : ambil data pilihan()
6 : proses selesai()
Gambar 4.26 Sequencial Diagram Admin Membackup Data
79
divisi logistik
website
database
1 : login divisi logistik()
2 : isi divisi, user dan pass submit form() 3 : periksa ketersediaan data divisi logistik()
4 : data admin tidak ada()
5 : isi divisi, user dan pass lalu submit form() 6 : data divisi logistik ada()
7 : menampilkan halaman utama divisi logistik()
8 : input surat masuk()
9 : input surat ekspedisi()
10 : cek surat masuk() 11 : cek surat ekspedisi() 12 : surat masuk di simpan() 13 : surat ekspedisi di simpan()
14 : proses selesai()
Gambar 4.27 Sequencial Diagram Divisi Logistik Login
80
divisi logistik
website
database
1 : masuk ke catat surat masuk()
2 : menampilkan form catat surat masuk()
3 : mengisi no, cabang, perihal, divisi() 4 : periksa data form()
5 : data form salah()
6 : mengisi no, cabang, perihal, divisi() 7 : data form benar()
8 : perubahan data surat masuk()
9 : proses selesai()
Gambar 4.28 Sequencial Diagram Divisi Logistik Mencatat Surat Masuk
81
divisi logistik
website
database
1 : masuk ke catat surat ekspedisi()
2 : menampilkan pilihan pilihan surat ekspedisi()
3 : ambil data pilihan surat ekspedisi() 4 : menampilkan form surat ekspedisi()
5 : mengisi no, perihal, biaya, divisi tujuan() 6 : periksa data form()
7 : data form salah()
8 : mengisi no, perihal, biaya, divisi tujuan() 9 : data form benar()
10 : perubahan data surat ekspedisi()
11 : proses selesai()
Gambar 4.29 Sequencial Diagram Divisi Logistik Mencatat Surat Ekspedisi
82
divisi logistik
website
database
1 : masuk ke cari surat masuk()
2 : menampilkan form cari surat masuk()
3 : mengisi no, cabang() 4 : periksa data form()
5 : data form salah()
6 : mengisi no, cabang()
7 : data form benar() 8 : ambil data surat masuk()
9 : menampilkan data surat masuk()
10 : proses selesai()
Gambar 4.30 Sequencial Diagram Divisi Logistik Cari Surat Masuk
83
divisi logistik
website
database
1 : masuk ke cek persetujuan spoa dan nd()
2 : menampilkan form cari surat ekspedisi()
3 : mengisi no, divisi() 4 : periksa data form()
5 : data form salah()
6 : mengisi no, divisi()
7 : data form benar() 8 : ambil data surat ekspedisi()
9 : menampilkan surat ekspedisi()
10 : proses selesai()
Gambar 4.31 Sequencial Diagram Divisi Logistik Cek Persetujuan SPOA dan ND
84
divisi umum
website
database
1 : login divisi umum()
2 : isi divisi, user dan pass submit form() 3 : periksa ketersediaan data divisi umum()
4 : data admin tidak ada()
5 : isi divisi, user dan pass lalu submit form() 6 : data divisi umum ada()
7 : menampilkan halaman utama divisi umum()
8 : persetujuan surat masuk() 9 : persetujuan surat masuk di simpan()
10 : proses selesai()
Gambar 4.32 Sequencial Diagram Divisi Umum Login
85
divisi umum
website
database
1 : masuk ke persetujuan surat masuk()
2 : ambil data surat masuk() 3 : menampilkan surat masuk()
4 : setuju()
5 : batal() 6 : perubahan data di simpan()
7 : proses selesai()
Gambar 4.33 Sequencial Diagram Divisi Umum Persetujuan Surat Masuk
86
4.2.4
Class Diagram ekspedisi
anak cabang
+nomor +no_kp +perihal +biaya +divisi +tgl_masuk +tgl_terima
+id +cabang +alamat +add() +select() +update() +dalete()
+1
+add() +delete() +update() 1 surat masuk
division +id +divisi +kode +pass +add() +select() +update() +delete()
+1
log +id +divisi +kegiatan +waktu
+nomor +no_kp +cabang +perihal +divisi +tgl_masuk +tgl_terima +add() +delete() +update()
Gambar 4.34 Class Diagram Website Surat Masuk
4.3
Perancangan Layout User Interface Perancangan struktur navigasi yang digunakan dalam pembangunan sebuah situs web adalah pemetaan situs web. Pemetaan situs web menggambarkan struktur hierarki dari link – link di dalam situs web, sehingga melalui pemetaan situs web yang baik, akan mempermudah maintenance di kemudian
hari, baik untuk
menambahkan link – link baru, maupun untuk menganalisa link – link yang mungkin mengalami broken link. Perancangan antarmuka situs dilakukan untuk mempermudah user dalam menggunakan web. Untuk perancangan antarmuka yang dilakukan web Sistem Informasi Pengolahan Data Surat Masuk Berbasis Multiuser Di PT.PEGADAIAN (Persero) Bandung ini, yaitu dengan menyediakan menu – menu yang berfungsi
87
untuk melaksanakan pengolahan data yang ada pada tersebut. Adapun menu – menu yang disediakan yaitu sebagai berikut.
Gambar 4.35 Login
Gambar 4.36 Admin
88
Gambar 4.37 Logistik
Gambar 4.38 Logistik
