Fase Perancangan HASIL DAN PEMBAHASAN

4.4.7 Solusi Pemecahan Masalah

Dari hasil analisa permasalahan, peneliti mencoba untuk memberikan solusi terhadap masalah yang terjadi pada tabel berikut : Tabel 4.1 Solusi Permasalahan Sistem Berjalan No Permasalahan Solusi 1 Staf Bagian Keuangan harus menginput dokumen pengajuan satu persatu pada setiap dokumen pengajuan Dengan membangun sebuah sistem pengajuan dokumen pencairan dana maka user atau staf Bagian Keuangan dapat mrnyusun dokumen pencairan dana dengan hanya menginput pada satu tampilan. 2 Tidak tersedianya laporan- laporan, user atau staf Bagian Keuangan tidak dapat mencetak secara langsung register-register yang terdapat pada dokumen pencairan dana Aplikasi Pengajuan Dokumen Pemcairan Dana dibuat dengan tujuan memudahkan staf pada Bagian Keuangan dalam penginputan, melihat laporan berupa register SPP, SPM, SP2D dan langsung dapat mencetaknya.

4.5 Fase Perancangan

Tahapan selanjutnya dalam RAD setelah menganalisis masalah pada sistem yang berjalan adalah tahap perancangan sistem yang bertujuan untuk mengatasi permasalahan-permasalahan yang ada dan memberikan usulan rancangan sistem. Pada tahap ini gambaran sistem yang diusulkan digambarkan dengan menggunakan UML dengan tools sebagai berikut :

4.5.1 Perancangan Proses

4.5.1.1 Use Case Diagram

Pada Use Case Diagram ini menjelaskan apa yang dilakukan oleh sistem yang akan dibangun dan actor yang akan berinteraksi dengan sistem. Actor dan use case ditentukan atas dasar kebutuhan fungsi-fungsi. Kebutuhan fungsi ini diakomodir di use case. Selanjutnya use case menyediakan nilai hasil kepada aktor. Atas dasar spesifikasi diatas terdapat 1 Actor yang berinteraksi dengan sistem, yaitu: 1. Staf Bagian Keuangan, bertindak sebagai admin ataupun pengguna sistem yang mempunyai hak penuh terhadap aplikasi sistem. Gambar rancangan use case diagram yang diusulkan bisa dilihat pada gambar 4.3 dan pada tabel 4.1 sd 4.6. User Staf Bag. Keuangan Login Input Data Penyediaan Dana SPD Pertriwulan DPA Program dan Kegiatan Input Pengajuan SPP Ket. Keperluan Pembayaran Jenis SP2D Nama Bank No. NPWP No. Rek Input SPTJB dependency dependency dependency dependency Input Pengajuan SPM Ket. Keperluan Pembayaran Jenis SP2D Nama Bank No. NPWP No. Rek Gambar 4.4 Use Case Diagram yang diusulkan

4.5.1.2 Deskripsi Use Case

Setiap use case di atas harus dideskripsikan dalam dokumen yang disebut dengan dokumen flow of event. Dokumen ini mendefinisikan apa yang harus dilakukan oleh sistem ketika actor mengaktifkan use case. Struktur dari dokumen use case ini mempunyai deskripsi penjelas berupa brief description, actor yang terlibat, precondition, main flow, alternative flow, dan postcondition : 1. Login Tabel 4.2 Spesifikasi naratif use case ’Login’ Use case name Login verifikasi account. Brief Description User Staf Bag. Keuangan login terhadap sistem memasukkan identitas user dan password maka sistem akan memvalidasi identitas user dan password tersebut. Actor User Staf Bag. Keuangan. Precondition User harus mengetahui user id dan password yang dimiliki sebelum masuk ke halaman utama. Main Flow Sistem menampilkan jendela input, kemudian masukkan identitas user, password. Jika identitas user dan password yang diinginkan benar maka sistem akan menampilkan halaman utama. Alternate flow Jika dalam menginput identitas user dan password salah maka sistem akan menampilkan pesan error dan memintanya untuk mengisikan kembali. Postcondition Sistem menampilkan halaman utama. 2. Input Data Penyediaan Dana SPD Tabel 4.3 Spesifikasi naratif use case ’Input Data Penyediaan Dana SPD’ Use case name Input Data Penyediaan Dana SPD. Brief Description User dapat melakukan penginputan SPD. Actor User Staf Bag. keuangan. Precondition User menginput data dalam master SPD untuk dapat melakukan pilihan penginputan selanjutnya. Main Flow User masuk ke menu pilih nama kegiatan yang sudah diedit atau diinput dalam master SPD. Alternate flow User dapat mengubah kembali inputan nilai SPD dan menyimpannya, jika user ingin membatalkan penginputan nilai SPD dengan menekan tombol batal. Postcondition User dapat melakukan penginputan data penyediaan dana SPD dan menyimpannya ke dalam database. 3. Input Pengajuan SPP Tabel 4.4 Spesifikasi naratif use case ’Input Pengajuan SPP’ Use case name Input Pengajuan SPP. Brief Description User dapat melakukan penginputan pengajuan SPP. Actor User Staf Bag. Keuangan. Precondition User sudah mengisi Ket. Keperluan Pembayaran, Jenis SP2D, Nama Bank, No. NPWP dan No. Rekening. Main Flow User menginput data pengajuan SPP dan uraian Kode Rekening, Keterangan dan Jumlah. Alternate flow User dapat mengubah kembali inputan nilai SPP dan menyimpannya, jika user ingin membatalkan penginputan nilai SPP dengan menekan tombol batal. Postcondition User dapat melihat dan mencetak Surat Pengantar SPP-GU, Ringkasan SPP-GU, Rincian SPP-GU dan SPTJB. 4. Input SPTJB Tabel 4.5 Spesifikasi naratif use case ’ Input SPTJB’ Use case name Input SPTJB. Brief Description User dapat melakukan uraian pembelanjaan. Actor User Staf Bag. Keuangan. Precondition User mengisi Nama Penerima dan No. Urut Kwitansi. Main Flow User masuk ke tampilan form SPTJB. Alternate flow User dapat memindahkan data dari sistem ke office dengan menekan tombol ekspor. Postcondition User dapat mencetak hasil dari penginputan SPTJB. 5. Input Pengajuan SPM Tabel 4.6 Spesifikasi naratif use case ’ Input Pengajuan SPM’ Use case name Input Pengajuan SPM Brief Description User dapat melakukan penginputan pengajuan SPM. Actor User Staf Bag. Keuangan. Precondition User sudah mengisi Ket. Keperluan Pembayaran, Jenis SP2D, Nama Bank, No. NPWP dan No. Rekening. Main Flow User menginput data pengajuan SPM dan uraian Kode Rekening, Keterangan dan Jumlah. Alternate flow User dapat mengubah kembali inputan nilai SPM dan menyimpannya, jika user ingin membatalkan penginputan nilai SPM dengan menekan tombol batal. Postcondition User dapat melihat dan mencetak Surat form SPM, Pengantar SPM dan Pernyataan SPM.

4.5.1.3 Activity Diagram

Menggambarkan aliran fungsionalitas dalam suatu sistem. Activity diagram dapat digunakan dalam pemodelan bisnis untuk menunjukan business workflow. Atau juga digunakan dalam analisa kebutuhan untuk menggambarkan aliran kejadian melalui suatu use case. Untuk activity diagram aplikasi E-commerce pada perusahaan, seperti berikut : 1. Activity Diagram Login User Sistem klik menu Login finish masuk ke Main Menu tampilkan Form Login Input identitas user dan password Login berhasil Yes No Gambar 4.5 Activity Diagram Login 2. Activity Diagram Input Data Penyediaan Dana SPD User Sistem Klik menu Master SPD finish Tampilkan Master SPD Pilih Nama Kegiatan Tampilkan menu Nama Kegiatan Gambar 4.6 Activity Diagram Input Data Penyediaan Dana SPD 3. Activity Diagram Input Pengajuan SPP User Sistem Klik menu Pengajuan SPP Menu Input Ket. Keperluan Pembayaran, Jenis SP2D, Nama Bank, No. NPWP, No. Rek Tampilkan Menu Input Data Surat Pengantar, Ringkasan, Rincian SPTJB Cetak finish Tampilkan menu Pengajuan SPP Gambar 4.7 Activity Diagram Input Pengajuan SPP 4. Activity Diagram Input SPTJB User Sistem Klik menu Input SPP Klik menu Input SPTJB Tampilkan form SPTJB finish Tampilkan menu Input Nama Penerima dan No. Urut Kwitansi Cetak Gambar 4.8 Activity Diagram Input SPTJB 5. Activity Diagram Input Pengajuan SPM User Sistem Klik menu Pengajuan SPM Cetak Tampilkan menu Pengajuan SPM Menu Input Ket. Keperluan Pembayaran, Jenis SP2D, Nama Bank, No. NPWP, No. Rekening Tampilkan Data form SPM, Pengantar Pernyataan SPM Masukan Nama, Nama Bank, No. Rekening, Jumlah Pembayaran Finish Gambar 4.9 Activity Diagram Input Pengajuan SPM

4.5.1.3 Sequence Diagram

Sequence Diagram ini nantinya akan menjelaskan secara detail urutan proses atau pesan yang dilakukan dalam sistem, untuk mencapai tujuan dari use case, dimana proses atau pesan ini merupakan event atau metode dari objek ke class, yang terdapat dalam pengembangan sistem ini. Berikut ada beberapa sequence diagram dari perancangan sistem aplikasi Dokumen Pengajuan Pencairan Dana Pada SKPD Sekretariat Daerah Kota Tangerang Selatan, yaitu : 1. Sequence Diagram Login Welcome Login form Main Window User start Login return to saveAndSubmitToDbase return to Gambar 4.10 Sequence Diagram Login 2. Sequence Diagram Input Data Penyediaan Dana SPD Form menu Master SPD Menu Pilih Nama Kegiatan Database Master SPD User editData return to saveAndSubmitToDbase return to InputNewData Gambar 4.11 Sequence Diagram Input Data Penyediaan Dana SPD 3. Sequence Diagram Input Pengajuan SPP Form Pengajuan SPP Database Pengajuan SPP User InputNewData Menu Input Ket. Keperluan Pembayaran, Jenis SP2D, Nama Bank, No. NPWPNo. Rek save to cancelAction InputData Gambar 4.12 Sequence Diagram Input Pengajuan SPP 4. Sequence Diagram Input SPTJB Form Input SPP Form Input Nama PenerimaNo. Urut Kwitansi Database Form SPTJB inputNewData cancelAction editData saveTo ::User Gambar 4.13 Sequence Diagram Input SPTJB 5. Sequence Diagram Input Pengajuan SPM Form Pengajuan SPM Database Pengajuan SPM User InputNewData Menu Input Ket. Keperluan Pembayaran, Jenis SP2D, Nama Bank, No. NPWPNo. Rek save to cancelAction InputData Gambar 4.14 Sequence Diagram Input Pengajuan SPM

4.5.1.5 Class Diagram

Class diagram ini menggambarkan desain sistem yang akan dibangun, Setiap class akan diwakili oleh tabel, attribut class yang akan menjadi field, struktur data class diagram yang disajikan adalah sebagai berikut: +Masuk +Keluar -Identitas User -Password User User Staf Keuangan +Tambah +Ubah +Hapus +Segarkan +Cetak -Nomer -Tahun -KodeSO -KodeBidang -KodePro -KodeKeg -NomorSPP -TglSPP -NomorSP2D -Status SP2D -TglSP2D -FlagSP2D -NomorSPM -TglSPM -FlagSPM -NIPBendahara -KodePerusahaan -Keperluan -FlagSPPTolak -FlagSPMTolak -FlagSP2DTolak -FlagSPP -UserInput -DateInput -UserEdit -DateEdit Inputan SPPSPM HeaderSP2D +Simpan +Batal +Segarkan -NomorSPK -TglSPK -NomorSPP -NomorADM -TglADM -NilaiSPK -Vol -JangkaSPK -JangkaADM -Cara -TglFinishSPK -TglFinishADM -Sanksi -BAPeriksa -BAkemajuan -BATerima -BABayar -WaktuPelaksanaan -Deskripsi -NIP -Nama Kontrak +Tambah +Ubah +Hapus +Segarkan +Cetak -Nomor -Tahun -KodeSO -KodeBidang -KodeKegiatan -KodeSubKegiatan -NoSP2D -NoSPP -NoSPM -KodeRek -Rek -Ket -JumlahSPP -JumlahSPM -JumlahSP2D DetailSP2D +Simpan +Ubah +Hapus -NoSPTJB -TglSPTJB -NoSPP Inputan SPTJB HeaderSPTJB +Simpan +Ubah +Hapus -Nomer -NomerSPTJB -KodeSO -NoSPP -KodeKeg -KodeBidang -KodeSubKegiatan -KodeRek -Rekening -Ket -Jumlah -NoKwitansi -TglKwitansi -Penerima -FlagSPTJB DetailSPTJB +Tambah +Ubah +Hapus +Segarkan +Cetak -Nomer -KodeSo -NoSPP -NoSPM -NoSP2D -KodeKeg -kodeBidang -KodePsh -NamaPsh -BentukPsh -NPWPPsh -PimpinanPsh -AlamatPsh -NamaBank -NoRek -NIPBendahara -Nama -Jabatan -NoRek -Bank -NPWP DetailPerusahaan +Simpan +Ubah +Hapus -No -KodeSo -NoSPP -NoSPM -NoSP2D -KodeKeg -KodeBidang -Uraian -Jumlah -Ket DetailInfo +Simpan +Ubah +Hapus -Nomer -KodeSo -NoSPP -NoSPM -NoSP2D -KodeKeg -KodeBidang -Uraian -Jumlah -Keterangan DetailPotongan 1 1.. 1.. 1.. 1.. 1 1.. 1 1 1 1 1 1 1 1 Gambar 4.15 Class Diagram

4.5.2 Perancangan Antar Muka

Pada tahap ini penulis melakukan perancangan terhadap user interface dari aplikasi ini. Perancangan yang dilakukan meliputi halaman- halaman yang ada di dalam sistem, seperti melakukan perancangan antar muka aplikasi dan tata letak yang akan dibangun. 1. Halaman Menu Login Lambang Daerah Identititas User Password User Keluar Masuk Gambar 4.16 Halaman Menu Login 2. Halaman Menu Utama MENU UTAMA 1. MASTER 3. LAPORAN 2. PENYUSUNAN SPPSPM 4. INFORMASI 5. UTILITAS PILIH KELUAR Gambar 4.17 Halaman Menu Utama 3. Halaman Input Pengajuan SPD Input Data SPD Organisasi Tambah 01. Nama Kegiatan Tanggal Jumlah Nomor Triwulan 1. 2. Batal Simpan Ubah Hapus Keluar Import SPD Gambar 4.18 Halaman Input Pengajuan SPD 4. Halaman Input Pengajuan SPP No. Urut Jenis Belanja No. SPP Tgl SPP Validasi Tolak SPP Tahun Jenis SP2D Kegiatan BendaharaPihak ketiga No. Rek Bank Keperluan NPWP Detail SPTJB Pot. Non Gaji Pot. Gaji Simpan SPD Simpan SPD Rekening Pagu Rek DPA Jml Realisasi Sisa Pagu Rek Sisa SPD Triwulan II Jml SPD Jml Kotor Jml SPP Rek Jml Pot. Gaji Jml Pot. BL Pagu DPA Simpan Segarkan Batal Keluar Gambar 4.19 Halaman Input Pengajuan SPP 5. Halaman Input Pengajuan SPM No. Urut Jenis Belanja No. SPM Tgl SPM Validasi Tolak SPM Tahun Jenis SP2D Kegiatan BendaharaPihak ketiga No. Rek Bank Keperluan NPWP Detail SPTJB Pot. Non Gaji Pot. Gaji Simpan SPD Simpan SPD Rekening Pagu Rek DPA Jml Realisasi Sisa Pagu Rek Sisa SPD Triwulan II Jml SPD Simpan Segarkan Batal Keluar Jml Kotor Jml SPM Rek Jml Pot. Gaji Jml Pot. BL Pagu DPA Gambar 4.20 Halaman Input Pengajuan SPM 6. Halaman Input SPTJB Lembar SPTJB Salinan Pengguna Anggaran SPM Rapel Keluar Oke Setup Printer Ekspor Cetak No. Awal Gambar 4.21 Halaman Input SPTJB

4.6 Fase Konstruksi