BAB IV PERANCANGAN Penjelasan Singkat Isi Menu Berikut mengenai menu di WEB Surat Masuk PT. Pegadaian (Persero) Kanwil X Bandung

(1)

57

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

(2)

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.

(3)

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.

(4)

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

3. Admin

a. Beranda

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.

(5)

d. Login

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.

(6)

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 --

(7)

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

1. Pada halamana menu utama , pilih

menu divisi

2. Kelola divisi dengan memilih menu

(8)

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

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

(9)

Primary, Secondary Actors Divisi logistik

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

menu catat surat masuk

2. Inputkan no kepala surat, cabang,

prihal, divisi tujuan

(10)

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

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

(11)

Successful Post Condition Masuk ke bagian halaman cari surat masuk

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

menu cek persetujuan SPOA/ND

2. Inputkan no kepala surat, dan divisi

(12)

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

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

(13)

menu persetujuan surat masuk

2. Pilih aksi benar atau salah dengan

surat lampiran

4.2.2 Activity Diagram

admin website database

masuk ke website form login

mengisi divisi, user dan pass

submit form login cek validasi

ambil data admin yang sama dengan data form login

cek validasi

menampilkan pesan login gagal

masuk ke halaman utama admin pembaharuan data

(14)

masuk ke anak cabang ambil data anak cabang menampilkan data anak cabang

pembaharuan data anak cabang view data anak cabang

add, edit, delete

Gambar 4.14 Activity Diagram Admin Mengatur Anak Cabang

masuk ke divisi ambil data divisi

menampilkan data divisi

pembaharuan data divisi view data divisi

add, edit, delete

Gambar 4.15 Activity Diagram Admin Mengatur Divisi

masuk ke backup menampilkan pilihan backup

ambil data pilihan backup backup data anak cabang

backup data divisi backup data history

(15)

divisi logistik website database

ambil data divisi logistik yang sama dengan data form login

cek validasi

masuk ke halaman utama divisi logistik pembaharuan data

view surat

edit surat

Gambar 4.16 Activity Diagram Divisi Logistik Login

masuk ke catat surat masuk menampilkan form catat surat masuk

mengisi no, cabang, prihal, divisi

submit form input

cek validasi cek validasi

cek validasi

perubahan data surat masuk

menampilkan form catat surat masuk

(16)

masuk ke catat surat ekspedisi menampilkan pilihan suart ekspedisi

mengisi no, perihal, biaya, divisi tujuan

submit form input cek validasi

cek validasi

perubahan data surat ekspedisi

menampilkan form surat ekspedisi Surat SPOA

Surat ND

ambil data pilihan surat ekspedisi

menampilkan form surat ekspedisi

Gambar 4.18 Activity Diagram Divisi Logistik Mencatat Ekspedisi

masuk ke cari catat surat menampilkan form cari surat masuk

mengisi no, cabang

submit form cari cek validasi

cek validasi

ambil data surat masuk

menampilkan surat masuk

(17)

masuk ke cek persetujuan SPOA dan ND menampilkan form surat ekspedisi mengisi no, divisi

submit form cari cek validasi

cek validasi

ambil data surat ekspedisi

menampilkan surat ekspedisi

Gambar 4.20 Activity Diagram Divisi Logistik Cek Persetujuan SPOA dan ND

divisi umum website database

ambil data divisi umum yang sama dengan data form login

cek validasi

masuk ke halaman utama divisi umum pembaharuan data divisi umum

view surat masuk

edit surat masuk

(18)

masuk ke persetujuan surat masuk ambil data surat masuk

view data surat masuk perubahan surat masuk menampilkan data surat masuk

setuju batal

(19)

4.2.3 Sequencial Diagram

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()

(20)

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()

(21)

1 : masuk ke divisi()

2 : ambil data divisi()

3 : menampilkan data divisi()

4 : add() 5 : edit() 6 : delete()

7 : perubahan data divisi()

(22)

1 : masuk ke backup()

2 : backup data anak cabang() 3 : backup data divisi() 4 : backup data history()

5 : ambil data pilihan()

(23)

1 : login divisi logistik()

2 : isi divisi, user dan pass submit form() 3 : periksa ketersediaan data divisi logistik()

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()

(24)

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()

Gambar 4.28 Sequencial Diagram Divisi Logistik Mencatat Surat Masuk

(25)

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()

8 : mengisi no, perihal, biaya, divisi tujuan() 9 : data form benar()

10 : perubahan data surat ekspedisi()

Gambar 4.29 Sequencial Diagram Divisi Logistik Mencatat Surat Ekspedisi

(26)

1 : masuk ke cari surat masuk()

2 : menampilkan form cari surat masuk()

3 : mengisi no, cabang()

4 : periksa data form()

6 : mengisi no, cabang()

7 : data form benar() 8 : ambil data surat masuk()

9 : menampilkan data surat masuk()

(27)

1 : masuk ke cek persetujuan spoa dan nd()

2 : menampilkan form cari surat ekspedisi()

3 : mengisi no, divisi()

4 : periksa data form()

6 : mengisi no, divisi()

7 : data form benar() 8 : ambil data surat ekspedisi()

9 : menampilkan surat ekspedisi()

Gambar 4.31 Sequencial Diagram Divisi Logistik Cek Persetujuan SPOA dan ND

(28)

1 : login divisi umum()

2 : isi divisi, user dan pass submit form() 3 : periksa ketersediaan data divisi umum()

6 : data divisi umum ada()

7 : menampilkan halaman utama divisi umum()

8 : persetujuan surat masuk()

9 : persetujuan surat masuk di simpan()

(29)

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()

Gambar 4.33 Sequencial Diagram Divisi Umum Persetujuan Surat Masuk

(30)

anak cabang +id +cabang +alamat +add() +select() +update() +dalete() division +id +divisi +kode +pass +add() +select() +update() +delete() ekspedisi +nomor +no_kp +perihal +biaya +divisi +tgl_masuk +tgl_terima +add() +delete() +update() surat masuk +nomor +no_kp +cabang +perihal +divisi +tgl_masuk +tgl_terima +add() +delete() +update() log +id +divisi +kegiatan +waktu +1 +1 1

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

(31)

untuk melaksanakan pengolahan data yang ada pada tersebut. Adapun menu – menu yang disediakan yaitu sebagai berikut.

Gambar 4.35 Login

(32)

Gambar 4.37 Logistik