RANCANG BANGUN SISTEM INFORMASI DAN

MONITORING POLRES PROBOLINGGO KOTA

BERBASIS WEB RESPONSIVE

TUGAS AKHIR

Diajukan Untuk Memenuhi

Persyaratan Guna Meraih Gelar Sarjana Strata 1

Teknik Informatika Universitas Muhammadiyah Malang

Disusun Oleh :

EVRINDY TRI YULIANTO

201110370311443

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH MALANG

2016

KATA PENGANTAR

Puji syukur kehadirat Allah SWT atas segala limpahan rahmat dan hidayah-

Nya, serta shalawat dan salam kepada junjungan kita Rasulullah SAW sehingga

penulis dapat menyelesaikan tugas akhir yang berjudul :

“RANCANG BANGUN SISTEM INFORMASI DAN MONITORING

POLRES PROBOLINGGO KOTA BERBASIS WEB RESPONSIVE”

Di dalam tulisan ini disajikan pokok-pokok bahasan yang meliputi

perancangan dan pembuatan sistem informasi dan monitoring polres probolinggo

kota berbasis web responsive.

Penulis menyadari sepenuhnya bahwa dalam penulisan tugas akhir ini masih

banyak kekurangan dan keterbatasan. Oleh karena itu penulis mengharapkan saran

yang membangun agar tulisan ini bermanfaat bagi perkembangan ilmu pengetahuan

kedepan.

Malang, 21 Oktober 2016

Penulis

DAFTAR ISI

LEMBAR PERSETUJUAN ......................................................................... i

LEMBAR PENGESAHAN ........................................................................... ii

LEMBAR PERNYATAAN .......................................................................... iii

LEMBAR PERSEMBAHAN ....................................................................... iv

ABSTRAK ...................................................................................................... v

ABSTRACT .................................................................................................... vi

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

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

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

DAFTAR TABEL .......................................................................................... xv

BAB I PENDAHULUAN

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

1.2 Rumusan Masalah .................................................................................... 2

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

1.4 Tujuan Penelitian ...................................................................................... 3

1.5 Metodologi Penelitian .............................................................................. 3

1.6 Sistematika Penulisan ............................................................................... 4

BAB II LANDASAN TEORI

2.1 Sistem Informasi ...................................................................................... 5

2.1.1 Pengertian Sistem .......................................................................... 5

2.1.2 Pengertian Informasi .................................................................... 5

2.1.3 Pengertian Sistem Informasi ........................................................ 5

2.1.4 Komponen Sistem Informasi ........................................................ 5

2.2 Web Responsive Design ........................................................................... 7

2.3 Web Programing ...................................................................................... 7

2.3.1 HTML5 ......................................................................................... 7

2.3.2 CSS3 ............................................................................................. 8

2.3.3 PHP ............................................................................................... 8

2.3.4 Javascript ...................................................................................... 8

2.3.5 Framework ................................................................................... 9

2.3.6 Bootstrap ...................................................................................... 9

2.4 XAMPP .................................................................................................... 9

2.5 MySQL ..................................................................................................... 10

2.6 Monitoring ................................................................................................ 10

2.7 DFD (Data Flow Diagram) ...................................................................... 11

2.7.1 Pengertian DFD ............................................................................ 11

2.7.2 Komponen-komponen DFD ......................................................... 11

2.8 Flowchart .................................................................................................. 14

2.8.1 Pengertian Flowchart .................................................................... 14

2.8.2 Pedoman Dalam Membuat Flowchart .......................................... 14

2.8.3 Jenis-jenis Flowchart .................................................................... 14

2.9 ERD (Entity Relationship Diagram) ........................................................ 16

BAB III ANALISA DAN PERANCANGAN SISTEM

3.1 Analisa Sistem .......................................................................................... 17

3.2 Perancangan Sistem .................................................................................. 18

3.2.1 Arsitektur Sistem .......................................................................... 18

3.2.2 Fitur- fitur ...................................................................................... 19

3.2.3 Flowchart Sistem .......................................................................... 21

3.2.4 Diagram Konteks (Context Diagram) .......................................... 25

3.2.5 Data Flow Diagram Level 0 ......................................................... 26

3.2.6 Data Flow Diagram Level 1 Proses 1 : Olah Data ....................... 27

3.2.7 Data Flow Diagram Level 1 Proses 2 : Pencarian Data ............... 28

3.2.8 Data Flow Diagram Level 1 Proses 3 : Membuat Laporan .......... 29

3.3 Entity Relationship Diagram Sistem ........................................................ 30

3.4 Perancangan User Interface ...................................................................... 31

3.4.1 User Interface pada Administrator ............................................... 32

3.4.2 User Interface pada User .............................................................. 35

3.5 Peta Konsep Sistem .................................................................................. 40

3.6 Daftar Tabel .............................................................................................. 41

BAB IV IMPLEMENTASI DAN PENGUJIAN

4.1 Implementasi Sistem ................................................................................ 49

4.1.1 Kebutuhan Perangkat Keras (Hardware Requirements) .............. 49

4.1.2 Kebutuhan Perangkat Lunak (Software Requirements) ............... 49

4.1.3 Tampilan Sistem ........................................................................... 50

4.2 Pengujian Sistem ....................................................................................... 65

4.2.1 Pengujian Web Responsive .......................................................... 65

4.2.2 Pengujian Sistem Menggunakan Metode Black Box ................... 66

BAB V PENUTUP

5.1 Kesimpulan ............................................................................................... 80

5.2 Saran ......................................................................................................... 80

DAFTAR PUSTAKA .................................................................................... 82

LAMPIRAN ................................................................................................... 84

DAFTAR GAMBAR

2.1 Komponen Sistem Informasi ..................................................................... 6

2.2 Notasi terminator/ Kesatuan Luar ............................................................. 11

2.3 Notasi Arus Data ....................................................................................... 12

2.4 Notasi Proses ............................................................................................. 13

2.5 Notasi Simpanan Data ............................................................................... 13

2.6 Komponen Pembentuk ERD ..................................................................... 16

3.1 Arsitektur Sistem ....................................................................................... 19

3.2 Flowchart Login Sistem ............................................................................ 21

3.3 Flowchart Tambah Data ............................................................................ 22

3.4 Flowchart Edit Data .................................................................................. 23

3.5 Flowchart Cari Data .................................................................................. 24

3.6 Diagram Konteks ....................................................................................... 25

3.7 Data Flow Diagram Level 0 ...................................................................... 26

3.8 Data Flow Diagram Level 1 Olah Data ..................................................... 27

3.9 Data Flow Diagram Level 1 Pencarian Data ............................................. 28

3.10 Data Flow Diagram Level 1 Membuat Laporan ..................................... 29

3.11 ERD Sistem ............................................................................................. 30

3.12 Tampilan Halaman Awal Form Login .................................................... 31

3.13 Tampilan Halaman Utama Admin .......................................................... 32

3.14 Tampilan Halaman Akun Admin ............................................................ 32

3.15 Tampilan Form Tambah Data Akun Admin ........................................... 32

3.16 Tampilan Form Edit Data Akun Admin .................................................. 33

3.17 Tampilan Halaman Detail Data Akun Admin ......................................... 33

3.18 Tampilan Halaman Data Rencana Kegiatan ........................................... 33

3.19 Tampilan Halaman Cetak Data Rencana Kegiatan ................................. 34

3.20 Tampilan Halaman Data Hasil Kegiatan ................................................. 34

3.21 Tampilan Halaman Cetak Data Hasil Kegiatan ...................................... 34

3.22 Tampilan Halaman Utama SPKT ............................................................ 35

3.23 Tampilan Halaman Data Pengaduan ....................................................... 35

3.24 Tampilan Halaman Utama TAHTI ......................................................... 35

3.25 Tampilan Halaman Data Tahanan ........................................................... 36

3.26 Tampilan Halaman Cetak Laporan Data Tahanan .................................. 36

3.27 Tampilan Halaman Data Barang Bukti ................................................... 36

3.28 Tampilan Halaman Cetak Laporan Data Barang Bukti .......................... 37

3.29 Tampilan Halaman Utama RESKRIM .................................................... 37

3.30 Tampilan Halaman Data Statistik Kriminalitas ...................................... 37

3.31 Tampilan Halaman Data Tanda Bukti Laporan ...................................... 38

3.32 Tampilan Halaman Cetak Data Tanda Bukti Laporan ............................ 38

3.33 Tampilan Halaman Data Laporan Polisi ................................................. 38

3.34 Tampilan Halaman Cetak Data Laporan Polisi ....................................... 39

3.35 Tampilan Halaman Data Kendaraan Hilang ........................................... 39

3.36 Tampilan Halaman Data Kendaraan Temuan ......................................... 39

3.37 Peta Konsep Sistem ................................................................................. 40

4.1 Tampilan Biasa Form Login Sistem .......................................................... 51

4.2 Tampilan Responsive Form Login Sistem ................................................ 51

4.3 Tampilan Biasa Halaman Utama Admin .................................................. 52

4.4 Tampilan Responsive Halaman Utama Admin ......................................... 52

4.5 Tampilan Biasa Halaman Akun Admin .................................................... 53

4.6 Tampilan Responsive Halaman Akun Admin ........................................... 53

4.7 Tampilan Biasa Form Tambah Akun Admin ............................................ 54

4.8 Tampilan Responsive Form Tambah Akun Admin .................................. 54

4.9 Tampilan Biasa Form Edit Akun Admin .................................................. 55

4.10 Tampilan Responsive Form Edit Akun Admin ....................................... 55

4.11 Tampilan Biasa Halaman Detail Akun Admin ....................................... 56

4.12 Tampilan Responsive Halaman Detail Akun Admin .............................. 56

4.13 Tampilan Biasa Halaman Rencana Kegiatan .......................................... 57

4.14 Tampilan Responsive Halaman Rencana Kegiatan ................................ 57

4.15 Tampilan Biasa Halaman Hasil Kegiatan ............................................... 58

4.16 Tampilan Responsive Halaman Hasil Kegiatan ...................................... 58

4.17 Tampilan Biasa Halaman Utama SPKT .................................................. 59

4.18 Tampilan Responsive Halaman Utama SPKT ........................................ 59

4.19 Tampilan Biasa Halaman Pengaduan ...................................................... 59

4.20 Tampilan Responsive Halaman Pengaduan ............................................ 60

4.21 Tampilan Biasa Halaman Utama TAHTI ................................................ 60

4.22 Tampilan Responsive Halaman Utama TAHTI ...................................... 60

4.23 Tampilan Biasa Halaman Tahanan ......................................................... 61

4.24 Tampilan Responsive Halaman Tahanan ................................................ 61

4.25 Tampilan Hasil Cetak Laporan Tahanan ................................................. 62

4.26 Tampilan Hasil Export Data Tahanan Ke Format Excel ......................... 62

4.27 Tampilan Halaman Barang Bukti ............................................................ 62

4.28 Tampilan Halaman Utama RESKRIM .................................................... 63

4.29 Tampilan Halaman Tanda Bukti Laporan ............................................... 63

4.30 Tampilan Halaman Laporan Polisi .......................................................... 63

4.31 Tampilan Halaman Kendaraan Hilang .................................................... 64

4.32 Tampilan Halaman Kendaraan Temuan .................................................. 64

4.33 Tampilan Halaman Statistik Kriminalitas ............................................... 64

4.34 Pengujian Perangkat Smartphone ............................................................ 65

4.35 Pengujian Browser .................................................................................. 66

DAFTAR TABEL

3.1 Users .......................................................................................................... 41

3.2 Pengaduan ................................................................................................. 41

3.3 Rencana Kegiatan SPKT ........................................................................... 41

3.4 Rencana Kegiatan TAHTI ......................................................................... 42

3.5 Rencana Kegiatan RESKRIM ................................................................... 42

3.6 Hasil Kegiatan SPKT ................................................................................ 42

3.7 Hasil Kegiatan TAHTI .............................................................................. 43

3.8 Hasil Kegiatan RESKRIM ........................................................................ 43

3.9 Tahanan ..................................................................................................... 44

3.10 Barang Bukti ........................................................................................... 45

3.11 Tanda Bukti Laporan ............................................................................... 46

3.12 Laporan Polisi ......................................................................................... 47

3.13 Kendaraan Hilang .................................................................................... 48

3.14 Kendaraan Temuan ................................................................................. 48

3.15 Kecamatan ............................................................................................... 48

3.16 Kelurahan ................................................................................................ 48

4.1 Test Case Sistem ....................................................................................... 67

DAFTAR LAMPIRAN

Lampiran A – Deskripsi dan Hasil Uji ............................................................ 1

Lampiran B – Contoh Laporan Data Tahanan ................................................ 16

Lampiran C – Contoh Laporan Data Barang Bukti ......................................... 17

Lampiran D – Contoh Laporan Data Rencana Kegiatan Harian ..................... 18

DAFTAR PUSTAKA

[1] Iriani, Salmia Nova. 2013. “Penerapan Aplikasi Client- Server Pada

Sistem Informasi Kriminal (Studi Kasus : Polres Salatiga)”. Universita s

Kristen Satya Wacana, Vol. 9, pp. 8 -17.

[2] Purwanti, Juli. 2009. “Sistem Informasi Registrasi Lembaga

Pemasyarakatan (LAPAS) Kelas I Medan”. Universitas Sumatera Utara.

[3] N, Sora, 2014. “Pengertian Website Dan Jenisnya”. [Online]. Tersedia :

http://www.pengertianku.net/2014/09/mengetahui-pengertian-website-

dan-jenisnya.html [4 April 2016].

[4] Melmaharani, Rizkyasari dan Diana Laily. 2014. “E-Commerce Goody

Bag Spungbond Menggunakan QR Code Berbasis Web Responsif”.

Universitas Muria Kudus.

[5] Robert K. Leitch dan K. Roscoe Davis. 1983 "Accounting Information

Systems". Prentice-Hall, NewJersey.

[6] Sungkono, Rivai. 2014. “Prototipe Sistem Monitoring Control

Pengembangan Aplikasi Pada Perguruan Tinggi Raharja”. Sekolah

Tinggi Manajemen dan Ilmu Komputer Raharja.

[7] Widianti, Utami Dewi. 2012. “Pembangunan Sistem Informasi Aset di

PT.Industri Telekomunikasi Indonesia (PERSERO) Berbasis Web”.

UNIKOM.

[8] Gordon B Davis, HM Jogiyanto, Soejono Trimo. 2000. “Pengertian

Sistem Informasi”. PT. Elek Media Komputindo, Kelompok Gramedia,

Anggota IKAPI, Jakarta.

[9] Herbowo, Agus Rahmat. 2012. “Web Responsive Design Untuk Situs

Berita Menggunakan Framework CodeIgniter”. Universitas Gunadarma.

[10] Syachbana dan Zulkarnain Akib. 2014. “Perancangan Website

Menggunakan Responsive Web Design”. Jurnal SIGMATA, Vol. 2 No. 1.

[11] Trimarsiah, Yunita. 2014. “Rancang Bangun Sistem Infromasi Berbasis

Web Pada Privat Awal Belajar Cerdas Menggunakan PHP dan MySQL”.

Jurnal Media Informatika dan Komputer Vol. 4 No. 1.

[12] Saputro, Haris. 2012. “Modul Pembelajaran Praktek Basis Data

(MySQL)”. [Online]. Tersedia : http://www.akmi-baturaja.ac.id/wp-

content/uploads/2012/07/modul_mysql.pdf. [2 Juni 2016].

[13] Feruariyanti, Herny dan Eri Zuliarso. 2012. “Rancang Bangun Sistem

Perpustakaan untuk Jurnal Elektronik”. Universitas Stikubank.

[14] Nugroho, Nurcahyo Budi dan Badrul Anwar. 2008. “Desain Web

Menggunakan HTML dan Javascript”. Jurnal SAINTIKOM Vol.4 No.1.

[15] Rosmala, Dewi. 2011. “Komparasi Framework MVC (CodeIgniter dan

CakePHP) Pada Aplikasi Berbasis Web”. Institut Teknologi Nasional

Bandung Vol. 2 No. 2.

[16] Septiawan, Vevin. 2012. “Penerapan Teknologi Responsive Web Design

Untuk Pengembangan Sistem Pelayanan Mahasiswa Pada Perpustakaan

Universitas Bina Darma”. [Online]. Tersedia :

digilib.binadarma.ac.id/download.php?id=689. [2 Juni 2016].

[17] Risnandar, Erdi. 2015. “Pembuatan Aplikasi Sistem Informasi Monitoring

Kegiatan Mahasiswa Berbasis Web dan Android Client”. Universita s

Negeri Semarang.

[18] Haviluddin. 2009. “Memahami Penggunaan Diagram Arus Data”. Jurnal

Informatika Mulawarman. Vol 4 No. 3.

[19] Nurullah. 2012. “Perancangan dan Pembuatan Sistem Informasi

Akuntansi Pada STMIK U’Budiyah Menggunakan VB.Net”. STMIK

U’Budiyah Indonesia.

[20] Edi, Doro. 2009. “Analisa Data Dengan Menggunakan ERD dan Model

Konseptual Data Warehouse”. Jurnal Informatika, Vol.5, No. 1 : 71 – 85