RANCANG BANGUN SISTEM INFORMASI PERSURATAN DAN

DISPOSISI BERBASIS WEB PADA BNN PROVINSI JAWA TIMUR

SKRIPSI

Diajukan untuk memenuhi persyaratan

dalam memperoleh gelar Sarjana Komputer

Program Studi Sistem Informasi

Disusun Oleh:

Muhammad Bachrul Ulum

1635010076

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS ILMU KOMPUTER

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWATIMUR

S U R A B A Y A

2020

vi

Judul Skripsi : RANCANG BANGUN SISTEM INFORMASI

PERSURATAN DAN DISPOSISI BERBASIS WEB

PADA BNN PROVINSI JAWA TIMUR

Penulis : Muhammad Bachrul Ulum

Pembimbing I : Eka Dyar Wahyuni, S.Kom, M.Kom

Pembimbing II : Syurfah Ayu Ithriah, S.Kom, M.Kom

ABSTRAK

Badan Narkotika Nasional Provinsi (BNNP) Jawa Timur adalah lembaga

pemerintah non kementrian yang berada di Negara Indonesia dan bertanggung

jawab kepada Presiden melalui koordinasi Kepala Kepolisian Negara Republik

Indonesia. Pada Badan Narkotika Nasional Provinsi Jawa timur sendiri memiliki

banyak bagian-bagian, yang menangani bidang dalam alur Administrasi dan Staff

dan salah satunya adalah Bagian Umum, pada bagian ini terdapat kegiatan

mengenai persuratan yang masih terdapat keluhan atau permasalahan, seperti

Penggunaan kertas untuk lembar disposisi yang terlalu banyak, surat tidak terbaca,

terselip ataupun terpindahkan secara tidak sengaja, pengarsipan data data surat

masuk harian yang secara manual ditulis dengan tangan di buku, penulisan disposisi

tidak efisien semisal jika diperlukan distribusi surat ke 3 bidang maka harus juga

dibuat 3 form disposisi baru dan ditulis tangan, bon nomor surat dan nomor surat

pada surat keluar yang membingungkan staff administrasi umum.

Berdasarkan dari permasalahan tersebut maka dibuatlah Sistem Informasi

Persuratan dan Disposisi menggunakan metode waterfall sebagai metode

pembangunan sistem. Sistem ini dibangun menggunakan bahasa pemrograman

PHP dan menggunakan database MYSQL serta dilakukan testing dengan metode

blackbox.

Dari hasil pembangunan sistem ini, sistem dapat membantu Staff

Administrasi di Bagian Umum serta bidang – bidang lain nya yang berada pada

BNNP Jatim untuk menangani proses persuratan serta disposisi dengan cara

menggunakan sistem ini yang di akses pada perangkat Mobile ataupun Desktop

yang saling terhubung pada jaringan lokal pada wilayah kantor BNNP Jatim.

Kata Kunci: Sistem informasi, persuratan, disposisi, Badan Narkotika Nasional

Provinsi Jawa Timur

vii

KATA PENGANTAR

Puji dan syukur saya panjatkan kehadirat Allah SWT, atas segala nikmat

dan karunia-Nya sehingga penulis dapat menyelesaikan skripsi ini yang berjudul

“RANCANG BANGUN SISTEM INFORMASI PERSURATAN DAN

DISPOSISI BERBASIS WEB PADA BNN PROVINSI JAWA TIMUR”. Skripsi

ini disusun dalam rangka memenuhi persyaratan dalam menyelesaikan Program

Studi S1 / Sistem Informasi di Universitas Pembangunan Nasional “Veteran” Jawa

Timur.

Dalam penyusunan skripsi ini banyak hambatan serta rintangan yang

penulis hadapi namun pada akhirnya dapat melaluinya berkat adanya bimbingan

dan bantuan dari berbgai pihak baik secara moral maupu spiritual. Untuk itu pada

kesempatan ini penulis menyampaikan ucapan terimakasih kepada:

1. Kedua orang tua saya yang telah memberikan dukungan baik moril maupun

materil serta doa yang tiada henti-hentinya kepada saya.

2. Ibu Eka Dyar Wahyuni, S.Kom, M.Kom, selaku dosen pembimbing 1 yang

senantiasa memberikan bimbingan dan arahan dalam penyelesaian skripsi ini.

3. Ibu Syurfah Ayu I, S.Kom, M.Kom, selaku dosen pembimbing 2 yang

senantiasa memberikan bimbingan dan arahan dalam penyelesaian skripsi ini.

4. Seluruh dosen Program Studi Sistem Informasi atas ilmu-ilmu yang di berikan

selama masa perkuliahan.

5. Teman – teman Goolag yang selama ini slelau menemani saya.

6. Teman – teman PKL saya Reja dan Erica yang senang membantu saya dalam

mengerjakan tugas selama kuliah.

Terima kasih kepada semua pihak yang telah membantu penyelesaian skripsi

ini. Semoga Allah membalas dengan balasan sebaik-baiknya. Dalam pengerjaan

skripsi ini saya menyadari bahwa skripsi ini masih ada kekurangan. Untuk itu saya

sangat membutuhkan kritik dan saran yang membangun dalam memperbaiki

penulisan skripsi ini.

Surabaya, 17 Juli 2020

Muhammad Bachrul Ulum

viii

DAFTAR ISI

SKRIPSI .................................................................................................................. ii

LEMBAR PENGESAHAN ................................................................................... iii

KETERANGAN REVISI....................................................................................... iv

SURAT PERNYATAAN........................................................................................ v

ABSTRAK ............................................................................................................. vi

KATA PENGANTAR .......................................................................................... vii

DAFTAR ISI ........................................................................................................ viii

DAFTAR GAMBAR ............................................................................................ xii

DAFTAR TABEL ............................................................................................... xvii

BAB I LATAR BELAKANG ................................................................................. 1

1.1 Latar Belakang ......................................................................................... 1

1.2 Rumusan Masalah .................................................................................... 3

1.3 Batasan Masalah ....................................................................................... 3

1.4 Tujuan ....................................................................................................... 4

1.5 Sistematika Penulisan ............................................................................... 4

BAB II TINJAUAN PUSTAKA ............................................................................. 6

2.1 Profil Lembaga ......................................................................................... 6

2.1.1 Visi dan Misi Lembaga ......................................................................... 6

2.1.2 Struktur Organisasi BNN Provinsi Jawa Timur ................................... 7

ix

2.2 Dasar Teori ............................................................................................... 8

2.2.1 Persuratan.............................................................................................. 8

2.2.2 Disposisi................................................................................................ 9

2.2.3 Sistem Informasi ................................................................................... 9

2.2.4 Data ..................................................................................................... 11

2.2.5 Basis Data ........................................................................................... 12

2.2.6 MySQL ............................................................................................... 13

2.2.7 CDM (Conceptual Data Model) ......................................................... 13

2.2.8 PDM (Physical Data Model)............................................................... 14

2.2.9 DFD (Data Flow Diagram) ................................................................. 15

2.2.10 Bahasa Pemrograman PHP ................................................................. 16

2.2.11 HTML (Hypertext Markup Language) ............................................... 17

2.2.12 Javascript ............................................................................................ 18

2.3 Penelitian Terdahulu ............................................................................... 18

BAB III METODOLOGI PENELITIAN.............................................................. 24

3.1 Metode Pengumpulan Data .................................................................... 24

3.1.1 Observasi dan Wawancara .................................................................. 24

3.1.2 Studi Literatur ..................................................................................... 24

3.2 Metode Perancangan Sistem................................................................... 24

3.2.1 Analisis Sistem Dan Pengumpulan Kebutuhan Sistem(Requirement) 25

3.2.2 Perancangan (design) .......................................................................... 26

3.3 Pembangunan Sistem ............................................................................. 26

3.4 Pengujian Sistem .................................................................................... 26

x

BAB IV HASIL DAN PEMBAHASAN .............................................................. 27

4.1 Hasil Metode Pengumpulan Data ........................................................... 27

4.1.1 Communication ................................................................................... 27

4.1.2 Studi Literatur ..................................................................................... 28

4.2 Hasil Metode Pembangunan Sistem ....................................................... 29

4.2.1 Analisis Sistem Dan Pengumpulan Kebutuhan Sistem(Requirement) 29

4.2.2 Perancangan (design) .......................................................................... 32

4.3 Pembangunan Sistem ............................................................................. 78

4.3.1 Implementasi Perangkat Keras (Hardware) ........................................ 78

4.3.2 Implementasi Perangkat Lunak (Software) ........................................ 79

4.3.3 Implementasi Database ....................................................................... 79

4.3.4 Implementasi Desain Antar Muka (Design Interface) ........................ 84

4.4 Implementasi Pengujian Sistem ........................................................... 111

4.5.1 Pengujian Halaman Login ................................................................ 111

4.5.2 Pengujian Halaman Tambah Surat Masuk........................................ 111

4.5.3 Halaman Tambah Data Disposisi ..................................................... 112

4.5.4 Halaman Tambah Surat Keluar......................................................... 113

4.5.5 Halaman Tambah Klasifikasi Surat .................................................. 113

4.5 Pembahasan .......................................................................................... 114

BAB V PENUTUP .............................................................................................. 115

5.1. Kesimpulan ........................................................................................... 115

5.2. Saran ..................................................................................................... 116

xi

DAFTAR PUSTAKA ......................................................................................... 117

LAMPIRAN ........................................................................................................ 119

xii

DAFTAR GAMBAR

Gambar 2.1 Struktur Organisasi BNN Provinsi Jawa Timur ................................ 7

Gambar 2.2 Contoh gambar PDM ....................................................................... 15

Gambar 3.1 Waterfall Model ............................................................................... 25

Gambar 4.1 Perancangan Document Flow surat masuk dan disposisi ................ 32

Gambar 4.2 Perancangan Document Flow surat keluar dan bon nomor surat .... 33

Gambar 4.3 Perancangan Diagram Konteks Sistem Informasi Persuratan dan

Disposisi (SIPEDIS) ............................................................................................. 35

Gambar 4.4 Perancangan DFD Level 0 Sistem Informasi Persuratan dan Disposisi

(SIPEDIS) ............................................................................................................. 36

Gambar 4.5 DFD Level 1 proses pengelolaan surat masuk ................................ 37

Gambar 4.6 DFD Level 1 proses pengelolaan surat keluar ................................. 38

Gambar 4.7 DFD Level 1 proses generate laporan ............................................. 39

Gambar 4.8 DFD Level 1 proses pengelolaan user ............................................. 39

Gambar 4.9 CDM (Conceptual Data Model) ...................................................... 41

Gambar 4.10 PDM (Physical Data Model) ......................................................... 42

Gambar 4.11 Perancangan halaman utama / login .............................................. 49

Gambar 4.12 Perancangan halaman dashboard admin surat masuk .................... 50

Gambar 4.13 Perancangan halaman Tambah Surat Masuk pada user Admin Surat

Masuk .................................................................................................................... 51

Gambar 4.14 Perancangan Halaman Data Surat Masuk pada user Admin Surat

Masuk .................................................................................................................... 52

Gambar 4.15 Perancangan Halaman Detail Surat Masuk pada user Admin Surat

Masuk .................................................................................................................... 53

xiii

Gambar 4.16 Perancangan Halaman Data Disposisi pada user Admin Surat Masuk

............................................................................................................................... 54

Gambar 4.17 Perancangan Halaman Detail Disposisi pada user Admin Surat

Masuk .................................................................................................................... 55

Gambar 4.18 Perancangan halaman Laporan surat masuk pada user Admin surat

masuk .................................................................................................................... 56

Gambar 4.19 Perancangan halaman dashboard kepala BNNP Jawa Timur ........ 57

Gambar 4.20 Perancangan halaman surat masuk baru pada user kepala BNNP

Jawa Timur ............................................................................................................ 58

Gambar 4.21 Perancangan halaman tambah disposisi pada user kepala BNNP Jawa

Timur ..................................................................................................................... 59

Gambar 4.22 Perancangan halaman data disposisi pada user kepala BNNP Jawa

Timur ..................................................................................................................... 60

Gambar 4.23 Perancangan halaman detail disposisi pada user kepala BNNP Jawa

Timur ..................................................................................................................... 61

Gambar 4.24 Perancangan halaman laporan surat masuk pada user BNNP Jawa

Timur ..................................................................................................................... 62

Gambar 4.25 Perancangan halaman laporan surat keluar pada user kepala BNNP

Jawa Timur ............................................................................................................ 63

Gambar 4.26 Perancangan halaman dashboard kepala bidang ........................... 64

Gambar 4.27 Perancangan halaman data disposisi pada user kepala bidang ...... 65

Gambar 4.28 Perancangan halaman detail disposisi pada user kepala bidang .... 66

Gambar 4.29 Perancangan halaman paraf surat pada user kepala bidang ........... 67

Gambar 4.30 Perancangan halaman dashboard kepala seksi .............................. 68

xiv

Gambar 4.31 Perancangan halaman data disposisi pada user kepala seksi ......... 69

Gambar 4.32 Perancangan halaman detail disposisi pada user kepala seksi ....... 70

Gambar 4.33 Perancangan halaman dashboard admin tiap bidang ..................... 71

Gambar 4.34 Perancangan halaman tambah surat keluar pada user admin tiap

bidang .................................................................................................................... 72

Gambar 4.35 Perancangan halaman tambah bon surat pada user admin tiap bidang

............................................................................................................................... 73

Gambar 4.36 Perancangan halaman data surat keluar pada user admin tiap bidang

............................................................................................................................... 74

Gambar 4.37 Perancangan halaman dashboard pada user admin tiap bidang ..... 75

Gambar 4.38 Perancangan halaman data surat keluar pada user admin sistem .. 76

Gambar 4. 39 Perancangan halaman data user pada user admin sistem ............. 77

Gambar 4.40 Perancangan halaman tambah klasifikasi pada user admin tiap bidang

............................................................................................................................... 78

Gambar 4.41 Query implementasi tabel surat_masuk ......................................... 79

Gambar 4.42 Query implementasi tabel disposis ................................................ 80

Gambar 4.43 Query implementasi tabel penerima_disposisi .............................. 80

Gambar 4.44 Query implementasi tabel isi_disposisi ......................................... 81

Gambar 4.45 Query implementasi tabel surat_keluar ......................................... 81

Gambar 4.46 Query implementasi tabel jenis_naskah_dinas .............................. 82

Gambar 4.47 Query implementasi tabel klasifikasi ............................................ 82

Gambar 4.48 Query implementasi tabel jenis_surat ............................................ 83

Gambar 4.49 Query implementasi tabel klasifikasi_jabatan ............................... 83

Gambar 4.50 Query implementasi tabel user ...................................................... 83

xv

Gambar 4.51 Halaman Login .............................................................................. 84

Gambar 4.52 Halaman Dashboard Admin Surat Masuk ..................................... 85

Gambar 4.53 Halaman Dashboard Admin Surat Masuk diakses dengan Mobile 86

Gambar 4.54 Halaman Tambah Surat Masuk Admin Surat Masuk .................... 87

Gambar 4.55 Halaman Data Surat Masuk Admin Surat Masuk.......................... 87

Gambar 4.56 Halaman Data Surat Masuk Admin Surat Masuk diakses dengan

Mobile ................................................................................................................... 88

Gambar 4.57 Halaman Detail Surat Masuk Admin Surat Masuk ....................... 89

Gambar 4.58 Halaman Data Disposisi Admin Surat Masuk ............................... 90

Gambar 4.59 Halaman Detail Disposisi Admin Surat Masuk ............................. 90

Gambar 4.60 Halaman Laporan Surat Masuk Admin Surat Masuk .................... 91

Gambar 4.61 Halaman Dashboard Kepala BNNP .............................................. 92

Gambar 4.62 Halaman Surat Masuk Baru Kepala BNNP ................................... 93

Gambar 4.63 Halaman Tambah Disposisi Kepala BNNP ................................... 93

Gambar 4.64 Halaman Data Disposisi Kepala BNNP ........................................ 94

Gambar 4.65 Halaman Detail Disposisi Kepala BNNP ...................................... 95

Gambar 4.66 Halaman Laporan Surat Masuk Kepala BNNP ............................. 95

Gambar 4.67 Halaman Laporan Surat Keluar Kepala BNNP ............................. 96

Gambar 4.68 Halaman Dashboard Kepala Bidang .............................................. 97

Gambar 4.69 Halaman Data Disposisi Kepala Bidang........................................ 98

Gambar 4.70 Halaman Detail Disposisi Kepala Bidang ..................................... 99

Gambar 4.71 Halaman Paraf Surat Kepala Bidang ........................................... 100

Gambar 4.72 Halaman Dashboard Kepala Seksi............................................... 101

Gambar 4.73 Halaman Data Disposisi Kepala Seksi ........................................ 102

xvi

Gambar 4.74 Halaman Detail Disposisi Kepala Seksi ...................................... 102

Gambar 4.75 Halaman Paraf Surat Kepala Seksi .............................................. 103

Gambar 4.76 Halaman Dashboard Admin Tiap Bidang.................................... 104

Gambar 4.77 Halaman Tambah Surat Keluar Admin Tiap Bidang .................. 105

Gambar 4.78 Halaman Tambah Bon Surat Admin Tiap Bidang ....................... 106

Gambar 4.79 Halaman List Bon Surat Keluar Admin Tiap Bidang .................. 106

Gambar 4.80 Halaman Lihat Surat Keluar Admin Tiap Bidang ....................... 107

Gambar 4.81 Halaman Dashboard Admin Sistem ............................................ 108

Gambar 4.82 Halaman Data Surat Keluar Admin Sistem ................................. 109

Gambar 4.83 Halaman Data User ...................................................................... 110

Gambar 4.84 Halaman Tambah Klasifikasi Surat ............................................. 110

xvii

DAFTAR TABEL

Tabel 2.1 Struktur Organisasi BNN Provinsi Jawa Timur ..................................... 8

Tabel 2.2 Obyek dalam PDM ............................................................................... 14

Tabel 2.3 Rangkuman penelitian terdahulu .......................................................... 19

Tabel 2.4 Rangkuman penelitian terdahulu .......................................................... 20

Tabel 2.5 Rangkuman penelitian terdahulu .......................................................... 22

Tabel 2.6 Rangkuman penelitian terdahulu .......................................................... 23

Tabel 4.1 Kebutuhan Fungsional Sistem .............................................................. 30

Tabel 4.2 Perancangan tabel surat_masuk............................................................ 43

Tabel 4.3 Perancangan tabel disposisi .................................................................. 44

Tabel 4.4 Perancangan tabel penerima_disposisi ................................................. 44

Tabel 4.5 Perancangan tabel isi_disposisi ............................................................ 45

Tabel 4.6 Perancangan tabel surat_keluar ............................................................ 45

Tabel 4.7 Perancangan tabel jenis_naskah_dinas ................................................. 46

Tabel 4.8 Perancangan tabel klasifikasi ............................................................... 47

Tabel 4.9 Perancangan tabel jenis_surat .............................................................. 47

Tabel 4.10 Perancangan tabel klasifikasi_jabatan ................................................ 48

Tabel 4.11 Perancangan tabel user ....................................................................... 48

Tabel 4.12 Pengujian Halaman Login ................................................................ 111

Tabel 4.13 Pengujian Halaman Tambah Surat Masuk ....................................... 112

Tabel 4.14 Pengujian Halaman Tambah Data Disposisi .................................... 113

Tabel 4.15 Pengujian Halaman Tambah Surat Keluar ....................................... 113

Tabel 4.16 Pengujian Halaman Tambah Klasifikasi Surat ................................. 114